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

Question

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

下面是反应代码：

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] 未定义。我在数据状态中存储的不是对象数组吗？

Answer 1

fetch 方法是一个异步方法，所以你需要做这样的事情：

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

因此它可以等待处理 fetchCovidData 方法。

Answer 2

流程如下：

您 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

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

Cannot access JavaScript object properties parsed from JSON

fetch

javascript-objects

reactjs

use-effect

use-state