无法读取未定义的属性(读取"响应")

Question

从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

Answer 1

你需要从加载状态为true开始，因为在初始渲染时你还没有data。

也移动渲染，你做的map到自己的组件，否则你会得到一个运行时错误关于太多的钩子:

{data.response.map((post) => (
<Inner post={post} />
))}

(这里呈现每个航班数据的组件简单地命名为"Inner")

你可以看到这个沙盒的完整演示。