ReactJS：对象的值未定义

如何解决ReactJS：对象的值未定义

我正在尝试制作一个显示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;

全局：

解决方法

默认情况下，您将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是），这些元素甚至都不会尝试渲染，因此代码不会尝试访问类似{{1 }}，直到confirmed存在。

---

但是，如果 cases 应该是一个数组，那么您在整体标记中还存在逻辑错误结构，因为数组不具有cases之类的属性。也许您打算从数组中计算值。如果是这种情况，那么您可以将初始状态保留为空数组：

confirmed

但是您需要将标记更改为使用数组的标记。例如，也许像这样：

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

我并不完全熟悉您正在使用的数据或想要如何显示它们，但是这里的关键考虑因素只是对象与对象数组之间的区别。您需要在代码中确定的内容。