React中Chart.js图表数组映射异常：固定图表均显示为当前图表

问题核心 #

1. 所有固定图表显示内容一致：因为你在<Line>组件里复用了全局的wbrdata，导致所有固定图表都渲染当前选中的图表数据
2. 使用chart.wbrdata报错：说明你往pinnedcharts数组添加元素时，没有正确存入对应图表的wbrdata对象，或者存储的引用存在问题

具体修复步骤 #

1. 修正固定图表的添加逻辑 #

确保点击固定按钮时，把当前选中图表的完整数据（包括title、wbrdata等字段）存入pinnedcharts，并且做浅拷贝避免引用污染：

const handlePinnedPin = () => {
  // 假设currentChart是当前选中的完整图表对象
  setPinnedcharts(prev => [...prev, {...currentChart}]);
};

如果wbrdata是嵌套对象，需要用深拷贝（比如JSON.parse(JSON.stringify(currentChart))），防止后续数据更新影响已固定的图表。

2. 绑定正确的图表数据源 #

把<Line>组件的data属性替换为当前遍历项的chart.wbrdata，确保每个固定图表渲染自己的数据集：

// 替换之前的<Line options={options} data={wbrdata} />
<Line options={options} data={chart.wbrdata} />

如果仍报错，先在map函数里打印当前项数据，确认chart.wbrdata的结构是否符合Chart.js要求：

{pinnedcharts.map((chart, index) => {
  console.log(chart.wbrdata); // 检查是否包含labels、datasets等必要字段
  return (
    // ... 其余代码
  );
})}

3. 优化列表项的key值 #

不要用index作为map的key，改用每个图表的唯一标识（比如chart.id），避免数组顺序变化导致组件渲染异常：

<Grid item md={6} key={chart.id}>

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