无法访问从 JSON 解析的 JavaScript 对象属性答案

【问题标题】：Cannot access JavaScript object properties parsed from JSON无法访问从 JSON 解析的 JavaScript 对象属性
【发布时间】：2020-11-28 08:32:44
【问题描述】：

我正在尝试使用括号和点符号访问对象的属性。但由于某种原因，它说对象未定义。

下面是反应代码：

import React from "react";

const App = () => {
  const [data, setData] = React.useState({});

  const fetchCovidData = () => {
    fetch("https://api.covid19api.com/country/south-africa")
      .then((response) => response.json())
      .then((result) => setData(result));
  };

  React.useEffect(() => {
    fetchCovidData();
  }, []);

  return <h1>{data[0].City}</h1>;
};

export default App;

当我console.log(data[0]) 时，它会打印出一个具有 City 属性的对象，但是当我尝试使用点符号访问它时，它会显示 data[0] 未定义。我存储在数据状态中的不是对象数组吗？

【问题讨论】：

标签： reactjs fetch javascript-objects use-effect use-state

【解决方案1】：

流程如下：

data 的初始状态是{}
当你的组件挂载时，它会调用效果来获取数据。
同时，组件仍然呈现它所拥有的内容。 <h1>{data[0].City}</h1>; 此行将获取data[0] 即undefined，然后尝试从该undefined 对象访问属性City，最终导致错误。
当你的数据被获取时，它会设置data的状态，只有data有内容并且data[0].City才有效

我的建议是：

利用optional chaining:return <h1>{data?.[0]?.City || "Loading..."}</h1>
如果你的data是一个对象数组，它的初始状态应该是一个空数组[]

Demo code

【讨论】：

不错。但是现在 h1 只会显示 Loading 。如何让它重新渲染？我是否使用 useCallback 挂钩来监视数据的状态值？
当你的数据到达时，它会调用setData并正确设置状态。仔细检查响应数据的结构是否正确。
@EddieLam 哦，对不起，我们应该只获取一次。我已经更新了代码

【解决方案2】：

fetch 方法是异步方法，因此您需要执行以下操作：

const fetchCovidData = async () => {
   await fetch("https://api.covid19api.com/country/south-africa")
      .then((response) => response.json())
      .then((result) => setData(result));
};

所以它可以等待 fetchCovidData 方法被处理。

【讨论】：

我认为 h1 标签的返回行没有等待 fetch 函数完成，因此试图访问空对象的 City 属性。