ReactJS：对象的值未定义

Question

我正在尝试制作一个显示 Covid 19 号码的应用程序。我想在渲染组件时显示全局数字，所以我为此使用了 useEffect 钩子。当我尝试显示global.confirmed 时，它返回一个对象，但是当我尝试显示global.confirmed.value 时，我得到Cannot read property 'value' of undefined 错误。我该如何解决这个问题？

import React from "react";
import "./App.css";
import axios from "axios";
import { useState, useEffect } from "react";
import "./App.css";

const App = () => {
  const [countries, SetCountries] = useState([]);
  const [cases, SetCases] = useState([]);
  const [global, SetGlobal] = useState({});

  const urlGlobal = "https://covid19.mathdro.id/api/"
  const urlCountries = "https://covid19.mathdro.id/api/countries/";

  useEffect(() => {
    axios.get(urlGlobal).then(res => SetGlobal(res.data))
    axios.get(urlCountries).then((res) => SetCountries(res.data.countries));
  }, []);

  const showCases = (e) => {
    const urlCases = `https://covid19.mathdro.id/api/countries/${e.target.value}`;
    axios.get(urlCases).then((res) => SetCases(res.data));
  };


  return (
    <div>
      <div>
        <p>Infected</p>
        <p>{cases.confirmed.value}</p>
        <p>{cases.lastUpdate}</p>
        <p>Number of active cases of COVID-19</p>
      </div>
      <div>
        <p>Recovered</p>
        <p>{cases.recovered.value}</p>
        <p>{cases.lastUpdate}</p>
        <p>Number of recoveries from COVID-19</p>
      </div>
      <div>
        <p>Deaths</p>
        <p>{cases.deaths.value}</p>
        <p>{cases.lastUpdate}</p>
        <p>Number of deaths caused by COVID-19</p>
      </div>
      <select name="countries" onChange={(e) => showCases(e)}>
        {countries.map((val, i) => (
          <option key={i} value={val.name}>
            {val.name}
          </option>
        ))}
      </select>
    </div>
  );
};

export default App;

全球：

Answer 1

默认情况下，您将cases 设置为一个空数组：

const [cases, SetCases] = useState([]);

在初始渲染时，虽然它仍然是一个空数组，但您尝试访问未在数组上定义的属性：

<p>{cases.confirmed.value}</p>

这里基本上有两个问题：

1. 数组没有像confirmed 这样的属性。您是否希望 cases 改为对象？
2. 当组件首次渲染时，cases 没有数据，所以不要尝试显示该数据。

让cases 以undefined 开头（因为在使用中它看起来甚至不应该是一个数组）：

const [cases, SetCases] = useState();

并且只在不是undefined时才显示：

<div>
  <p>Infected</p>
  <p>{cases && cases.confirmed.value}</p>
  <p>{cases && cases.lastUpdate}</p>
  <p>Number of active cases of COVID-19</p>
</div>

您可以重复其他用法，或将所有用法包含在单个检查中以检查 cases：

{
  cases &&
  <div>
    <p>Infected</p>
    <p>{cases.confirmed.value}</p>
    <p>{cases.lastUpdate}</p>
    <p>Number of active cases of COVID-19</p>
  </div>
}

这个想法是，如果 cases 是“假”（undefined 是），这些元素甚至不会尝试渲染，因此代码不会尝试访问像 confirmed 这样的属性，直到 cases存在。

---

然而，如果cases应该是一个数组，那么你还有一个整体标记结构中的逻辑错误，因为数组没有像confirmed 这样的属性。也许您打算从数组中计算值。如果是这种情况，那么您可以将初始状态保留为空数组：

const [cases, SetCases] = useState([]);

但是您需要将标记更改为使用数组的内容。例如，可能是这样的：

{
  cases.map(c => (
    <div>
      <p>Infected</p>
      <p>{c.confirmed.value}</p>
      <p>{c.lastUpdate}</p>
      <p>Number of active cases of COVID-19</p>
    </div>
  ))
}

我并不完全熟悉您正在使用的数据或您希望它如何显示，但这里的一个关键考虑因素就是对象和对象数组之间的区别。您需要在代码中确定哪个。