呈现列表-React-Javascript

我目前正在尝试呈现状态

我看到在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>
     )}
  </>
);

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

{
  "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
 }

---

这是因为由于对括号的管理不当，您正在交替使用let和jsx。因为它很混乱，我用codesandbox和React钩子重写了它

---

我可以说你需要正确理解映射函数。 还有，如何处理JSX内部的逻辑

首先，需要在map函数中添加return函数。 只要不返回地图中的所有内容 函数，则不会渲染任何内容。 其次，您需要在返回函数外部拆分变量赋值。 因此，返回内部映射函数将只包含JSX元素。 其他逻辑将在返回函数体之外。请拿 请看下面的代码。 第三，您还需要修复地图中标记的打字错误 功能。

---

{message.content}

为什么？这些信息直接来自sentAt和/或current date属性，为什么不在渲染过程中生成显示所需的值，这是创建用户看到的实际位的函数？例如，我想添加更多属性，因为以后我想有一个按钮，使用sentAt值按升序或降序对日期进行排序，而不是在呈现sate@Mike'Pomax'kamermansook时试图依赖另一个函数或处理程序，但是。。。这有什么关系？如果按sentAt排序，渲染中的实际代码仍将生成相同的派生值。排序使用setState和render对不在render中的消息数组进行重新排序，然后根据更新的this.state.messages数组盲目地重新生成UI。这就是React的工作原理：您根据用户操作更新状态，并根据更新的状态呈现您的UI。@Mike'Pomax'Kamermans好的，我更新了问题和代码，但仍然看到错误错误是什么？代码似乎无法工作当前错误应用程序…：呈现未返回任何内容。这通常意味着缺少返回语句。或者，要不呈现任何内容，请返回null。

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>;
}

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>
    );
  });
}