使用react-chartjs-2创建柱状图时遭遇TypeError: Cannot read properties of undefined (reading 'map')错误求助

嘿，我一眼就发现问题出在哪了——你给<Bar>组件传递的data对象里只定义了labels，完全漏掉了datasets数组！这就是触发报错的核心原因：currentData.datasets是undefined，自然没法调用map方法来处理数据。

react-chartjs-2的所有图表组件（包括Bar）都要求data必须包含datasets，它是用来定义图表的数据源、颜色、标签等核心配置的，没有它图表根本不知道要渲染什么内容。

修正后的柱状图代码 #

import React from "react";
import { Bar } from "react-chartjs-2";
// v3+版本的react-chartjs-2需要手动注册Chart.js组件
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";

// 注册必要的Chart.js组件
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

const BarChart = () => {
  return (
    <div>
      <Bar
        data={{
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          // 新增datasets数组，这是解决报错的关键！
          datasets: [
            {
              label: '投票数',
              data: [12, 19, 3, 5, 2, 3], // 和labels一一对应的数据
              backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
            }
          ]
        }}
        width={600}
        height={400}
        options={{ maintainAspectRatio: false }}
      />
    </div>
  );
};

export default BarChart;

额外小提示 #

1. 如果你使用的是v3及以上版本的react-chartjs-2，必须手动注册Chart.js的相关组件（就像代码里做的那样），否则还会出现其他异常。
2. datasets里的data数组长度要和labels数组长度保持一致，不然图表显示会错乱。
3. 要是需要动态生成数据，确保datasets始终是一个数组（哪怕是空数组[]），别让它变成undefined或者null。

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