從 API 獲取資料時出錯，我需要的實際資料是回應。但是當我嘗試訪問它時，它只是顯示為未定義。我添加了一個加載功能，但這似乎并沒有解決它。
Ex Json（原件太大）
{
"request": {
},
"response": [
{
Data I want here
}
選擇.js
const [data, setData] = useState();
const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
fetch(
//example API key
"https://airlabs.co/api/v9/flights?api_key=2a6ae284-575d-41d8-948a-b789734174dd&arr_icao=VOBL"
)
.then((res) => res.json())
.then((data) => {
setData(data);
})
.catch((err) => {
console.log(err);
})
.finally(() => {
setLoading(false);
});
}, []);
if (loading) {
return <div>Loading...</div>;
}
{data.response.map((post) => {
})
完整代碼鏈接 - https://codesandbox.io/s/heuristic-wood-meecre?file=/choose.js:2042-2072
uj5u.com熱心網友回復：
您需要從加載狀態開始true，因為在初始渲染時您還沒有data.
還要將您在其中執行的渲染移動map到它自己的組件中，否則您會收到關于太多鉤子的運行時錯誤：
{data.response.map((post) => (
<Inner post={post} />
))}
（這里渲染每個航班資料的組件簡稱為“Inner”）
您可以查看此沙盒以獲取完整演示。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/470158.html