渲染列表-反应- Javascript

Question

我目前正在尝试渲染状态

我在map循环中看到了声明变量的一些错误。

以下是我迄今为止的尝试，欢迎任何帮助。

import React from "react";
import axios from "axios";

const transformHumanReadableDateToMessages = date => {
  let d = new Date(date);
  const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
  ];
  return {
    DayOfTheWeek: d.getDate(),
    Month: d.getMonth(),
    Day: days[d.getDay()],
    YearAtTime: d.getFullYear()
  };
};

export default class App extends React.Component {
  state = {
    messages: []
  };

  componentDidMount() {

    axios.get(`https://api.myjson.com/bins/10xva4`).then(res => {
      let result = res.data["messages"];
          result = Array.from(new Set(result.map(e => JSON.stringify(e))));
          result.reduce((accu, curr) => {
           curr.date = transformHumanReadableDateToMessages(curr["sentAt"]);
            accu.push(curr)
            return accu;
          }, []);

      this.setState({
        messages: result
      });
    });
  }

  render() {
return (
  <>
    { this.state.messages.map(message => 
       let d = new Date(date);
      const days = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday"
      ];
     <div className="container">
     <p>{message.content}<p/>
     <p>{message.senderUuid}</p>
     <p>DayOfTheWeek: {d.getDate()}
     <p>Month: {d.getMonth()}</p>
     <p>Day: {days[d.getDay()]}</p>
     <p>Year: {d.getFullYear()} </p>
     </div>
     )}
  </>
);

}}

例如，返回的JSON中的每个元素如下所示：

{
  "sentAt":"2012-11-13T17:29:37.003Z",
  "uuid": "435453",
  "content": "1",
  "senderUuid": "2"
 }

我希望使日期更具可读性，然后将其添加到输出的元素中，如下所示：

{
 "sentAt":"2012-11-13T17:29:37.003Z",
 "uuid": "435453",
 "content": "1",
 "senderUuid": "2",
 "DayOfTheWeek": 22,
  "Month": 4,
  "Day": 'Friday',
  "YearAtTime": 2015
 }

Answer 1

这是因为您正在交替使用let和jsx，这是因为您对括号的管理不善。因为这是个烂摊子，我用代码框重写了它，并对其进行了反应。

https://codesandbox.io/s/trusting-nobel-vlo34

import React, { useState, useEffect } from "react";
import axios from "axios";
import "./styles.css";

const days = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday"
];
export default function App() {
  const [messages, setMessages] = useState([]);
  useEffect(() => {
    axios
      .get(`https://api.myjson.com/bins/10xva4`)
      .then(({ data: { messages } }) => setMessages(messages));
  }, []);
  const Display = messages.map(({ content, senderUuid, sentAt }, index) => {
    let d = new Date(sentAt);
    return (
      <div className="container" key={index}>
        <p>Content: {content}</p>
        <p>SenderUuid: {senderUuid}</p>
        <p>DayOfTheWeek: {d.getDate()}</p>
        <p>Month: {d.getMonth()}</p>
        <p>Day: {days[d.getDay()]}</p>
        <p>Year: {d.getFullYear()}</p>
      </div>
    );
  });
  // console.log({ messages });
  return <div className="App">{Display}</div>;
}

Answer 2

我可以说你需要正确理解地图功能。另外，如何处理JSX内部的逻辑。

首先，需要在map()函数中添加()函数。只要不返回map()函数中的所有内容，就不会呈现任何内容。

• 第二，您需要在返回函数之外拆分变量赋值。因此，have () So map()函数将只具有JSX元素。和其他逻辑将在返回函数体之外。请看下面的代码。
• 第三，您还需要修复映射函数中标记的错误。

​

<p>{message.content}<p/> <--- here typo : fix as </p>

<p>DayOfTheWeek</> doesn't have proper closing tag.

如果消息是空数组，则需要处理

• 以及最后一个消息。因此，如果消息状态为空数组，则应呈现其他内容。

。

下面的示例处理它。

import React from "react";
import "./styles.css";

 export default class App extends React.Component {
   state = {
    messages: []
   };

  componentDidMount() {
    //... your api call here
  }

render() {
  const { messages } = this.state;

  if (messages.length === 0) {
    return <p>No Message Found</p>;
  }

  messages.map(message => {
    let d = new Date();
    const days = [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday"
    ];

    return (
      <div className="container">
        <p>{message.content}</p>
        <p>{message.senderUuid}</p>
        <p>DayOfTheWeek: {d.getDate()}</p>
        <p>Month: {d.getMonth()}</p>
        <p>Day: {days[d.getDay()]}</p>
        <p>Year: {d.getFullYear()} </p>
      </div>
    );
  });
}

}