react useEffect fetch api data gives error TypeError: Cannot read property 'cases' of undefined

Question

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.

开始获取

Answer 1

当您创建图表数据时，您传递的是 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 等于零

，您应该 return 该组件

Answer 2

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

所以如果 val 是 10 而你正在访问 Data && Dataa[10].cases 那么它会抛出错误，因为在那个位置没有对象。要解决此问题，您可以执行类似

的操作

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

另外，不用在 useEffect 中编写 async 函数，您可以简单地这样做：

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

react useEffect fetch api data gives error TypeError: Cannot read property 'cases' of undefined

react useEffect fetch api data gives error TypeError: Cannot read property 'cases' of undefined

reactjs

react-hooks

use-effect