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;

全球的：

标签： reactjsaxiosreact-hooks

解决方案

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

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

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

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

这里基本上有两个问题：

数组没有像confirmed. 你希望cases成为一个对象吗？
当组件第一次渲染时，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>
  ))
}

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

reactjs - ReactJS：对象的值未定义

问题描述

解决方案

推荐阅读