ReactJS:对象的值未定义

Question

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

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 &&
  <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 存在。

---

但是，if cases should 是一个数组，那么你也有一个逻辑错误你的整体标记结构，因为数组没有像 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>
  ))
}

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