我正在嘗試從我的節點 js 服務器獲取一些資料，這些資料回傳給我一個陣列。收到這個陣列后，我想通過它進行映射，并用這個資料顯示同一組件的多次迭代。但是，map 函式沒有運行，因為我設定的初始狀態值是一個空陣列。我的問題是，為什么在useEffect函式中狀態改變后map函式沒有運行？這是代碼：
const [groupData, setGroupData] = useState([]);
useEffect(() => {
const func = async () => {
const fetchData = await fetch("http://localhost:5000/api/get-groups", {
method: "GET",
credentials: "include",
headers: {
"Content-Type": 'application/json',
'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS'
}
})
const jsonFetch = await fetchData.json();
setGroupData(jsonFetch.groupData);
}
func();
}, [])
return (
{groupData.map((elem) => {
<Card data={elem} />
})}
)
但是這些卡片根本不可見。我可以通過 console.log 查看進入反應行為的資料是否符合預期。我還嘗試將 useEffect 函式的第二個引數更改為 [groupData] 而不是 []。但它仍然不起作用。任何幫助，將不勝感激。謝謝！
uj5u.com熱心網友回復：
看來您沒有從.map()方法回傳任何內容。嘗試這樣做（洗掉大括號）：
return (
{groupData.map((elem) => <Card data={elem} /> )}
)
此外，建議您在呈現串列時添加 uniq 鍵（https://reactjs.org/docs/lists-and-keys.html）
uj5u.com熱心網友回復：
當您使用async函式時，您必須僅在交付請求的內容時繼續您的邏輯。您必須實作then函式，如下例所示：
const [groupData, setGroupData] = useState([]);
useEffect(() => {
const func = async () => {
fetch("http://localhost:5000/api/get-groups", {
method: "GET",
credentials: "include",
headers: {
"Content-Type": 'application/json',
'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS'
}
}).then(response => {
setGroupData(response.json().groupData);
}).catch(e => {
// Ops, there's a problem...
});
}
func();
}, [])
return (
{groupData.map((elem) => {
<Card data={elem} />
})}
)
[]s
uj5u.com熱心網友回復：
因為 groupData 在組件渲染時還沒有資料。試試下面的代碼：
const [groupData, setGroupData] = useState([]);
useEffect(() => {
const func = async () => {
try{
const fetchData = await fetch("http://localhost:5000/api/get-groups", {
method: "GET",
credentials: "include",
headers: {
"Content-Type": 'application/json',
'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,PATCH,OPTIONS'
}
})
const jsonFetch = await fetchData.json();
setGroupData(jsonFetch.groupData);
} catch (err){console.log(err)}; //<== Add try...catch to avoid app crash and catch error!
}
func();
}, [])
return (
{groupData?.map((elem, index) => {
<Card key={index} data={elem} />
})} //<== add "?" after groupData and key attribute in <Card /> !
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/476717.html
標籤：javascript 节点.js 反应 获取 API