react-chartjs-2 TypeError： undefined 不是对象 (评估 'nextDatasets.map')

Question

我正在从一些Notion数据库创建一些图表。我有一个nodejs后端，它查询Notion API，并(我认为(正确地格式化数据，以便在chartjs中使用。然后我有一个使用react-chatjs-2的前端。当我运行React应用程序时，我会得到

TypeError: undefined is not an object (evaluating 'nextDatasets.map')
setDatasets — utils.ts:51
cloneData — utils.ts:85
renderChart — chart.tsx:44
(anonymous function) — chart.tsx:91
invokePassiveEffectCreate — react-dom.development.js:23487
callCallback — react-dom.development.js:3945
dispatchEvent
invokeGuardedCallbackDev — react-dom.development.js:3994
invokeGuardedCallback — react-dom.development.js:4056
flushPassiveEffectsImpl — react-dom.development.js:23574
unstable_runWithPriority — scheduler.development.js:468
(anonymous function) — react-dom.development.js:23324
workLoop — scheduler.development.js:417
flushWork — scheduler.development.js:390
performWorkUntilDeadline — scheduler.development.js:157
logCapturedError — react-dom.development.js:20085

如果我用console.dir输出数据，我觉得这很好，但我可能错了，所以我不确定我是数据有问题还是react有问题。不管怎样，有人能帮我克服这个错误吗？

编辑：我更确定这不是数据，因为我发现我可以去react-chattjs-2垂直条形图沙箱，插入我的数据，它就可以工作了。事实证明，它非常丑陋，因为我的数据结构错误，但是。。。它应该仍然有效，不会产生上述错误。我想可能仍然是一个数据错误，但在这一点上似乎不太可能。

App.js:

import { useState, useEffect } from 'react';
import { BarChart as Chart } from './components/Chart';
import './App.css';

export default function App() {
useEffect(() => {
const fetchData = async () => {
const res = await fetch('/api');
const data = await res.json();
console.dir(data, { depth: null });
setChartData(data);
}         
fetchData();
}, []);   

const [chartData, setChartData] = useState({});

return (
<div className="App">
<Chart chartData={chartData} />
</div>
);
}

编辑：我更新了Chart.js，认为它可能是一个"；迁移到v4"；问题如果是，那么我所做的改变是不够的，因为我仍然看到同样的问题。到目前为止，我已经添加了从chart.js导入的内容和ChartJS.register调用/components/Chart.js:

import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
export const BarChart = ({ chartData }) => {
return (
<div>
<Bar
data={chartData}
options={{
plugins: {
title: {
display: true,
text: 'Visits by Link per Day'
},
legend: {
display: true,
position: "bottom"
}
}
}}
/>
</div>
);
};

显示在控制台日志中的数据，来自react应用程序：

Object
datasets: Array (81)
Object
data: Array (10)
0 0
1 23
2 3
3 0
...
label: "2021-08-27"
Object
data: Array (10)
...
label: "2021-08-28"
...
labels: Array (10)
0 "label1 - - some data"
1 "label2 - email - some other data"
...

如果我直接点击我的api端点，它们在浏览器中显示的数据：

{"labels":["label1 - - some data","label2 - email - some other data", ...],"datasets":[{"label":"2021-08-27","data":[0,23,3,0,1,0,1,2,0,0]},{"label":"2021-08-28","data":[0,0,0,0,0,0,0,0,0,0]},...,{"label":"2022-01-09","data":[0,0,25,0,0,0,0,0,0,0]}]}

正如我所说，就我所见，数据的设置方式与chartjs.org中的示例相同，而chartjsorg中的示例看起来与react-chatjs-2给出的示例相同。但我可能只是需要另一双眼睛。那么，我的数据有问题吗，或者我的应用程序有问题，或者。。。\_(ツ)_/

这是

react 17.0.2
chart.js 3.7.0
react-chartjs-2 4.0.0

谢谢！

Answer 1

事实证明，这是一个非常简单的问题，即应用程序试图在数据到达之前渲染组件，所以我必须在返回之前使用更多的状态来检查数据到达：

export default function App() {
const [chartData, setChartData] = useState({});
const [haveData, setHaveData] = useState(false); //here
useEffect(() => { 
const fetchData = async () => {
try {
const res = await fetch('/api');
const data = await res.json();
setChartData(data);
setHaveData(true); // here, and importantly after the above setChartData call
} catch(error) {
setHaveData(false);
setError(error);
}
}
fetchData();
}, []);
if (!haveData) { // here
return <div>Loading...</div>
} else {
return (
<div className="App">
<ErrorBoundary>
<Chart chartData={chartData} />
</ErrorBoundary>
</div>
);
}
}

简单的修复，尽管追踪起来并不简单，而且库没有更优雅地处理数据不足的问题，这让我有点沮丧。