react useEffect fetch api data 给出错误 TypeError: Cannot read property 'cases' of undefined答案

【问题标题】：react useEffect fetch api data gives error TypeError: Cannot read property 'cases' of undefinedreact useEffect fetch api data 给出错误 TypeError: Cannot read property 'cases' of undefined
【发布时间】：2021-04-06 22:54:14
【问题描述】：

import React,{useState,useEffect} from 'react'
import {Bar} from 'react-chartjs-2';

const Chart = ({val}) => {

    
   const [Dataa,setdata] = useState([]);
   useEffect(()=>{
     async function fetchData(){
        const apiresponse =await fetch('https://disease.sh/v3/covid-19/countries');
        const apidata =await apiresponse.json();
        console.log(apidata);
        setdata(apidata);
    }
    fetchData();
},[])


 const chartData = { labels: ['Total Cases', 'Deaths', 'Recovered','Active Cases'],
  datasets: [
    {
      label: 'My First dataset',
      backgroundColor: ['#737270','red','green'],
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1,
      hoverBackgroundColor: 'rgba(255,99,132,0.4)',
      hoverBorderColor: 'rgba(255,99,132,1)',
      data: [Dataa && Dataa[val].cases,Dataa[val].deaths,Dataa[val].recovered,Dataa[val].active]     }
  ]
}

    
      return (
        <div>
            <h2>Bar Example</h2>
            <Bar
          data={chartData}
          width={100}
          height={190}
          options={{
            maintainAspectRatio: false
          }}
        />
        </div>
    )
}
export default Chart;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Code Picture

我正在尝试获取 Covid-19 统计数据以在条形图中显示它，但它在访问对象属性时出错。 Val 是数组的索引号，因为 api 开始获取对象数组。

【问题讨论】：

请使用 Stackoverflow 工具栏中的“添加脚本”。因此我们可以帮助您直接在键盘中进行调试。
如何添加@suther
这里的val 属性是什么？是数字吗？
val 是索引号，因为从 API 获取的数据是一个对象数组
@MuhammadTariq 检查此link中的代码部分

标签： reactjs react-hooks use-effect

【解决方案1】：

当您创建 chartData 时，您传递的是 Dataa 而您没有检查它的长度，因此当您尝试访问 val 时，位置未定义。

我建议在传递之前检查 Dataa 的长度。

if (Dataa.length !== 0) {
    const chartData = { labels: ['Total Cases', 'Deaths', 'Recovered','Active Cases'],
    datasets: [
        {
            label: 'My First dataset',
            backgroundColor: ['#737270','red','green'],
            borderColor: 'rgba(255,99,132,1)',
            borderWidth: 1,
            hoverBackgroundColor: 'rgba(255,99,132,0.4)',
            hoverBorderColor: 'rgba(255,99,132,1)',
            data: [Dataa && Dataa[val].cases,Dataa[val].deaths,Dataa[val].recovered,Dataa[val].active]     
        }
   ]
   return (
    <div>
        <h2>Bar Example</h2>
        <Bar
      data={chartData}
      width={100}
      height={190}
      options={{
        maintainAspectRatio: false
      }}
    />
    </div>
   )
  }
} else {
    // Some component while data is loading
}

您可能想要添加一个微调器或其他东西，以表明应用程序正在执行某些操作来呈现组件。在这种情况下，如果 Dataa.length 等于零，您应该返回该组件

【讨论】：

Dataa 的长度为零，我该怎么办？？删除此错误
我刚刚添加了一个可能解决方案的代码 sn-p

【解决方案2】：

您收到此错误是因为最初 Dataa 是 [] 即空数组。

因此，如果 val 为 10 并且您正在访问 Data && Dataa[10].cases，那么它将引发错误，因为该位置没有对象。要解决此问题，您可以执行类似的操作

data: Dataa.length > 0 ? [Dataa[val].cases,Dataa[val].deaths,Dataa[val].recovered,Dataa[val].active] : []

您也可以简单地这样做：

fetch("https://disease.sh/v3/covid-19/countries")
  .then((res) => res.json())
  .then((res) => setData(res));

【讨论】：