为什么react-chatjs-2不能看到它需要渲染的数据

Question

感谢您的提示和/或帮助！我在试图绘制图表时遇到了困难。我已经恢复到测试一个非常简单的方法(下面的代码(，我仍然得到以下错误：

类型错误：无法读取未定义的属性(读取"映射"(

我可以记录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;

正在使用以下版本："反应"："17.0.2〃；具有"chart.js"："3.6.2"；，"react-chatjs-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]
}

Answer 2

默认情况下，数据为空，这就是为什么它会出现错误，因此您必须确保如果数据可用，则可以绘制折线图。

只需更改一行代码：{data.datasets ? <Line data={data} /> : ""}

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" }}>
{data.datasets ? <Line data={data} /> : ""}
</div>
);
}
export default Graph;