为什么react chartjs-2不能看到它需要呈现的数据？
为什么react chartjs-2不能看到它需要呈现的数据？
提问于 2021-12-20 14:17:46
谢谢你的建议和帮助！我在这里撞到了一面墙，想要绘制一张图表。我回到了测试一种非常简单的方法(下面的代码)，我仍然得到以下错误：
TypeError:无法读取未定义的属性(读取“映射”)
我可以记录从useEffect调用中设置的数据，但我不明白为什么它没有将其放入线条图中。从调试器(在utils.ts上)，我可以看到(currentData ={标签:未定义，数据集:数组(0)})和nextDatasets =未定义。我开始怀疑是否有某种版本错配的地方，无论如何，谢谢你的想法！
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“，加上"chart.js"："^3.6.2"，"react-chartjs-2"："^4.0.0”
回答 1
Stack Overflow用户
发布于 2021-12-22 14:39:23
默认情况下，数据是空的，这就是为什么它会产生一个错误，所以您只需确保如果数据可用，就可以绘制直线图。
只需更改一行代码：{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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70423184
复制相关文章
相似问题
腾讯云开发者
