React中使用Chart JS出现datasets映射错误的求助

在React中使用Chart JS时收到错误提示，无法对datasets中的内容执行map操作。控制台日志显示数据看似正常，但找不到问题所在。此前未使用state时功能正常，现在为了从Fetch API加载数据改用state后出现该问题。

代码示例 #

import React, { useEffect, useState } from 'react';
import { Bar } from 'react-chartjs-2';

const Chart = (props) => {  

const [data, setData] = useState({})
const [options, setOptions] = useState({})

useEffect(()=>{
    prepareData()
},[])

const prepareData = ()=>{
    const labels = ["1","2","3"]
    const barData = [50,30,20]
    const lineData = [50,80,100]

    let d = {
        labels: labels,
        datasets: [
        {
            label: 'Total Quantity',
            data: barData,
            backgroundColor: "rgba(0,100,200,0.25)",
            order: 0,
        },
        {
            label: 'Running Pct of Total',
            data: lineData,
            borderColor: "rgb(200,200,200)",
            backgroundColor: "rgb(200,200,200)",
            type: 'line',
            order: 1,
            pointStyle: 'circle',
            pointRadius: 4,
        }
        ]}
    setData(d)
    prepareOptions()
}

const prepareOptions = ()=>{
    let o = {
        scales: {
          x: {
            type: 'category',
            position: 'bottom',
            grid:{
                display: false
            }
          },
          y: {
            beginAtZero: true,
            grid:{
                display: false
            },
            display: false
          },
        },
        plugins:{
            title: {
                display: true,
                color: 'black',
                font: {
                    size: 16,
                },
            },
            datalabels:{
                display: true
            }
          }
        }
    setOptions(o)
}

return (
    <div className="container">
      <Bar data={data} options={options} />
    </div>
  );
};

export default Chart;

完整错误信息 #

utils.ts:57 Uncaught TypeError: Cannot read properties of undefined (reading 'map')
 at setDatasets (utils.ts:57:1)
 at cloneData (utils.ts:94:1)
 at renderChart (chart.tsx:43:1)
 at chart.tsx:97:1
 at commitHookEffectListMount (react-dom.development.js:23150:1)
 at commitPassiveMountOnFiber (react-dom.development.js:24926:1)
 at commitPassiveMountEffects_complete (react-dom.development.js:24891:1)
 at commitPassiveMountEffects_begin (react-dom.development.js:24878:1)
 at commitPassiveMountEffects (react-dom.development.js:24866:1)
 at flushPassiveEffectsImpl (react-dom.development.js:27039:1)

解决方案 #

• 问题根源：组件首次渲染时，data的初始值是{}，此时data.datasets为undefined，Chart JS内部尝试对datasets执行map操作时触发报错。而之前不用state时，直接传递完整的data对象，没有初始空对象的渲染阶段，所以不会出错。
• 修复步骤：将data的初始state设置为包含空数组的合法结构，确保Chart JS在首次渲染时能拿到可处理的默认数据：

const [data, setData] = useState({ labels: [], datasets: [] })

• 后续扩展：如果要从Fetch API加载数据，建议在数据加载完成前保持data的合法结构，也可以添加加载状态，在数据未准备好时不渲染Chart组件，避免类似错误。

内容的提问来源于stack exchange，提问作者aghosh03