javascript - react 从API提取数据给出错误无法读取未定义的属性

我正在使用React Hook通过本机获取方法从JSON对象获取数据。

const COVID_API_URL = "https://api.covid19api.com/summary";
const [infected, setInfected] = useState([]);

async function fetchData() {
  const response = await fetch(COVID_API_URL);

  response.json().then(response => setInfected(response));
}

useEffect(() => {
  fetchData();
}, []);

console.log(infected.Global.TotalConfirmed);

当我console.log来自TotalConfirmed的值时，我得到正确的结果，但是当我刷新浏览器时，我不断得到：

TypeError: Cannot read property 'TotalConfirmed' of undefined

有人知道为什么会这样吗？我正在使用Gatsby.js默认启动程序，这与此有关吗？

最佳答案

这里的问题是infected状态的值异步到达。您可以使用useEffect挂钩。

请尝试以下操作：

useEffect(() => {
   console.log(infected.Global.TotalConfirmed);
}, [infected]);

这样，一旦useEffect值更改-API调用响应-将在infected更新setInfected(response)状态的值后触发infected回调。

我希望这有帮助！

关于javascript - react 从API提取数据给出错误无法读取未定义的属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61157302/