我正在處理一個 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} />
})}
我也控制臺記錄了 postItems 陣列，這就是我得到的，這是正確的。
[
{
"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"
}
]
uj5u.com熱心網友回復：
您必須在 Post 組件之前放置一個 return 陳述句以顯式回傳該組件或洗掉大括號并放置括號。
您還應該回傳 forEach 或使用具有隱式回傳的映射
{postItems.map((element) => (
<Post location={element.location}
text={element.text} date={element.date} />
))}
uj5u.com熱心網友回復：
來分析一下問題
首先，您需要了解您的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.forEach((element) => {
return <Post location={element.location} text={element.text} date={element.date} />
})}
``
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/336834.html
上一篇：MySQL：按第二列排序——如果不為空——同時保持第一列順序
下一篇：未找到列或全域變數db2