渲染列表-React-Javascript

Question

我当前正在尝试呈现状态

我看到在映射循环中声明变量时出现了一些错误。

到目前为止，这是我的尝试，欢迎提供任何帮助

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。由于它一团糟，我用codesandbox和React钩子重写了它。

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((函数中添加return((函数。只要你不返回map((中的所有内容函数，则不会渲染任何内容。
  • 其次，您需要在返回函数之外拆分变量assign。因此，map((函数内部的return((将只有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>
);
});
}

}