Chart.js加载数据时报错TypeError: Cannot read properties of undefined (reading 'map')求助

错误原因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'map')，核心原因是组件首次渲染时，Chart.js拿到的chartData是空对象。

组件初始化时chartData的状态是{}，此时<Bar data={chartData}>接收的data里没有labels和datasets属性。Chart.js内部会尝试对这两个属性执行map操作生成图表元素，但这两个属性是undefined，因此触发了读取undefined的map方法的错误。虽然API请求能正常返回数据，但请求是异步的，组件会先完成首次渲染，这时异步请求还没返回，chartData还是初始的空对象。

解决方法 #

有两种简单的修复方式：

方法1：给chartData设置合法初始状态 #

把chartData的初始值从空对象改成包含空labels和datasets的结构，让Chart.js在首次渲染时能拿到合法的空数组，避免触发map错误：

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

方法2：添加条件渲染，等待数据加载完成后再渲染图表 #

在渲染<Bar>组件前，判断chartData是否已经有有效的数据，只有当数据准备好后再渲染图表，同时可以增加加载提示提升体验：

return (
  <div>
    {chartData.labels?.length > 0 && <Bar data={chartData}></Bar>}
    {!chartData.labels?.length && <div>加载中...</div>}
  </div>
);

额外优化提示 #

你当前datasets里的data是固定数组，如果后续需要和labels一一对应（比如每个组织对应一个数据值），建议从API返回的数据里提取对应字段，避免数据长度不匹配导致图表显示异常。

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