使用react-chartjs-2构建环形图时遇map读取未定义属性错误

核心原因与修复方案 #

1. 未注册Chart.js必要组件（最可能触发报错的原因） #

react-chartjs-2 v4+版本依赖的Chart.js不再自动注册所有图表元素，环形图需要的ArcElement、Tooltip、Legend必须手动注册，否则内部逻辑会因找不到对应组件而触发map调用报错。

修复代码示例：

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Doughnut } from 'react-chartjs-2';

// 注册环形图依赖的核心组件
ChartJS.register(ArcElement, Tooltip, Legend);

const SalesDoughnutChart = () => {
  const salesLabels = ["A", "B", "C", "D", "E"];
  const salesData = [12, 19, 3, 5, 2];

  const data = {
    labels: salesLabels,
    datasets: [
      {
        data: salesData,
        backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF"],
        hoverBackgroundColor: ["#FF6384", "#36A2EB", "#FFCE56", "#4BC0C0", "#9966FF"]
      }
    ]
  };

  return <Doughnut data={data} />;
};

export default SalesDoughnutChart;

2. 确保数据就绪后再渲染图表 #

即便你通过console.log验证了数组有值，也可能存在初始渲染时数据未完成初始化的场景（比如异步获取数据）。可以通过条件渲染规避报错：

return (
  salesLabels?.length && salesData?.length ?
    <Doughnut data={data} /> :
    <div>加载中...</div>
);

额外排查要点 #

• 核对react-chartjs-2与chart.js的版本：v4+版本必须手动注册组件，v3及以下版本无需此操作。
• 确认所有数据数组（labels、data）在渲染时已被正确赋值，避免初始状态为undefined或null。

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