无法读取未定义的属性(读取‘响应’)
2022-05-08
3552
从 API 获取数据时出错,我需要的实际数据在响应中。 但当我尝试访问时,它只是显示为未定义。我添加了一个加载函数,但 似乎没有解决问题。
Ex Json(原始文件太大)
{
"request": {
},
"response": [
{
Data I want here
}
choose.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
1个回答
您需要从加载状态为
true
开始,因为在初始渲染时您还没有
data
。
同时将您在
map
内部进行的渲染移到其自己的组件中,否则您会收到有关钩子过多的运行时错误:
{data.response.map((post) => (
<Inner post={post} />
))}
(此处,渲染每个航班数据的组件简称为“Inner”)
您可以查看此 沙盒 以获取完整演示。
tromgy
2022-05-08