react-chartjs-2 - 为什么 react-chartjs-2 看不到它需要呈现的数据？

Question

感谢任何提示和/或帮助!我在这里碰壁试图让图表呈现。我已经恢复到测试一个非常简单的方法(下面的代码)，但我仍然收到以下错误:

类型错误:无法读取未定义的属性(读取“ map ”)

我可以记录从 useEffect 调用中设置的数据，但我不明白为什么它没有进入折线图。从调试器(在 utils.ts 上)我可以看到 (currentData = {labels: undefined, datasets: Array(0)}) 和 nextDatasets = undefined。我开始怀疑是否某处存在某些版本不匹配，无论如何感谢您的任何想法!

import React, { useState, useEffect } from "react";
import {Line} from "react-chartjs-2";

function Graph() {
    const  myLabels =  ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'];
    const [data, setData] = useState({});
    useEffect(() => {        
        setData({
            labels: myLabels,
            datasets: [
                {   
                    label: 'The Level',
                    data: [21, 53, 65, 12, 32]
                },
            ]
        });
    }, [])
    console.log(data.datasets);
    return(
        <div style={{height: "500px", width: "500px"}}>
            <Line data={data} />
        </div>
    )}

export default Graph;

正在使用以下版本:“ react ”:“^ 17.0.2”与"图表.js": "^3.6.2",“react-chartjs-2”:“^4.0.0”

Answer 1

经过一些阅读...我重新审视了我的方法并提出了以下建议，我不确定这是处理事情的正确方法，仍在学习所以如果有人有任何有用的评论他们会欢迎!

我不确定此时我是否完全理解，但我认为我遇到的主要问题与用于构建图形数据的 useEffect() 有关，而不是可能会影响图表。

import React  from "react";
import { useState } from "react";
import 'chart.js/auto';
import { Chart } from 'react-chartjs-2';


function Graph() {
    
    const [chartData, setChartData] = useData();     

    return(
        <div style={{height: "500px", width: "500px"}}>
            <Chart type='line' data={chartData} />
        </div>
    )
}

export default Graph;

const useData = ( data = {} ) =>  {        
    const [state, setState] = useState(data);
    data = {            
        labels: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'],
        datasets: [
            {   
                label: 'The Level',
                data: [21, 53, 65, 12, 32]
            },
        ]
    }

return [data]
}