无法呈现react组件

Question

我正在使用React项目并从数据库获取数据。我能够正确地获取数据并存储在数组中，但是当我使用数组数据呈现组件时，组件没有显示出来。我不明白出了什么问题。我附上了下面的代码

const [postItems, setPostItems] = useState([])
useEffect(() => {
const getPostData = async () => {
try {
await api.getData().then((res) => {
console.log(res)
res.forEach((doc) => {
setPostItems(prevItems => [...prevItems, {
"location": doc.location,
"date": doc.date,
"text": doc.experience
}])
})
})
} catch (error) {
console.log(error.message);
}
}
getPostData()
console.log(postItems)
}, [])

我渲染post组件和传递数组(postItems)值作为道具。但是post组件没有被渲染。

{postItems.forEach((element) => {
<Post location={element.location} text={element.text} date={element.date} />
})}

我也控制台记录的posttems数组，这是我得到的，这是正确的。

[
{
"location": "Pune",
"date": "2021-10-30",
"text": "Great trip"
},
{
"location": "Pune",
"date": "2021-10-26",
"text": "Content"
},
{
"location": "Pune",
"date": "2021-10-29",
"text": "Wonderful experience"
}

)

Answer 1

你必须在Post组件前放一个return语句来显式返回该组件，或者去掉花括号并放入圆括号。

您还应该返回forEach或使用具有隐式返回

的map

{postItems.map((element) => (
<Post location={element.location}
text={element.text} date={element.date} />
))}

Answer 2

让我们分析一下这个问题，

首先，您需要了解setState()函数是异步的，在一个同步的forEach循环中连续调用它会导致你得到错误的结果。

const [postItems, setPostItems] = useState([])
useEffect(() => {
const getPostData = async () => {
try {
await api.getData().then((res) => {
const stateData = []; // make a temporary const to store your state to be set
res.forEach((doc) => {
stateData.push({
"location": doc.location,
"date": doc.date,
"text": doc.experience
});
});
// finally set your state here
setPostItems([...stateData]);
})
} catch (error) {
console.log(error.message);
}
}
getPostData();
}, [])

第二个问题存在于将每个状态元素映射到 的代码片段中添加如下返回语句，

{postItems.map((element) => {
return <Post location={element.location} text={element.text} date={element.date} />
})}
``