使用Recharts实现堆叠柱状图时出现字符串只读属性赋值错误

核心报错原因 #

你遇到的报错是典型的尝试修改只读数据触发的类型错误，结合你的场景，具体诱因分为以下几点：

1. 首先存在代码拼写错误：你的业务数据中堆叠字段名为Other，但第二个Bar组件的dataKey写为Others，多了后缀s，会导致Recharts读取对应字段失败。
2. 独立项目正常、遗留项目报错的核心原因：你传入ComposedChart的mappedValues数据源在遗留项目中是被冻结的只读数据。很多遗留项目的状态管理库（比如旧版Redux开启严格模式）、公共数据处理方法会使用Object.freeze()冻结数据防止意外篡改，而Recharts处理堆叠柱状图时，内部会直接修改原数据对象计算堆叠偏移量，修改只读对象就会触发该报错。
3. 额外排查点：确认两个项目的Recharts依赖版本一致，部分旧版本Recharts存在堆叠逻辑的已知bug，也会触发该类报错。

解决步骤 #

• 修正Bar组件的dataKey拼写：将第二个Bar的属性改为dataKey="Other"
• 传入图表的数据源先做深拷贝，生成可写的新数组再传入，示例：

// 用深拷贝生成新的可写数据，避免修改原冻结数据
const chartData = JSON.parse(JSON.stringify(mappedValues))
// 也可以用lodash.cloneDeep方法实现深拷贝
// const chartData = _.cloneDeep(mappedValues)

• 确认X轴dataKey="periodFixed"对应的字段确实存在于处理后的chartData每一项中，无拼写错误。
• 若问题仍存在，将遗留项目的Recharts升级到和独立项目一致的稳定版本即可。

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