如何解决无法读取React.js中未定义的属性'length'

由 发布于

我对React.js完全陌生。这是关于react的第一个项目，我正在关注YouTube教程来创建covid-19跟踪器应用程序。我有很多组件。我必须显示已创建chart.jsx文件的图表。

我遇到了意外错误，但无法解决，但导师在教程中没有得到该错误。错误是

TypeError：无法读取未定义的属性“ length”

当我尝试从代码中删除.length时，该应用程序再次开始运行，但无法显示图表。我不知道我在做什么错。我在下面留下代码。

https://www.youtube.com/watch?v=khJlrj3Y6Ls&t=2279s At 56:00

您可以在56:00的教程中看到它

I am getting the list errors and I know I am just making a silly mistake but I am not getting it. I thing some thing is wrong with particularly with the lines of code in the firs error. enter image description here

码：

import React, { useState, useEffect } from 'react';
import { fetchDailyData } from '../../api';
import { Line, Bar } from 'react-chartjs-2';

import styles from './Chart.module.css';

const Chart =() => {
    const [dailyData, setDailyData] = useState([]);

    useEffect(() =>{
        const fetchAPI = async () => {
            setDailyData(await fetchDailyData()); 
        }

        fetchAPI();
    });

    const lineChart = (
        dailyData.length
        ? (
        <lineChart
            data={{
                labels: dailyData.map(({ date }) => date),
                datasets: [{
                        data: dailyData.map(({ confirmed }) => confirmed ),
                        label: 'Infected',
                        borderColor: '#3333ff',
                        fill: true,
                }, {
                    data: dailyData.map(({ deaths }) => deaths ),
                    label: 'Deaths',
                    borderColor: 'red',
                    backgroundColor: 'rgba(255,0,0,0.5)',
                    fill: true,
                }],
            }}
        />
        ) : null
    )

    return( 
        <div className={styles.container}>
            {lineChart}
        </div>
    )
}

export default Chart;