React使用Highcharts报Cannot read properties of undefined (reading 'forEach')错误如何解决？

根因说明 #

报错本质是初始渲染时传入的图表配置中，series或下属的data字段为非法的undefined值，Highcharts初始化时尝试遍历对应字段触发了类型错误。
你此前设置allowChartUpdate={false}的方案虽然规避了报错，但该属性会直接关闭组件监听props变化自动更新图表的逻辑，因此后续params更新后图表也不会刷新，自然无法展示数据。

可行解决方案 #

方案1：条件渲染组件（最推荐，性能最优） #

等params拿到有效值后再渲染Highcharts组件，从根源避免空数据初始化的问题：

// 仅当params有有效值时才渲染图表
{params.length > 0 && <HighchartsReact 
  highcharts={Highcharts} 
  options={chartOptions} 
/>}

方案2：给配置加兜底默认值 #

如果需要提前渲染图表容器，可以给配置字段加合法兜底结构，保证初始配置也能被Highcharts正常解析：

const chartOptions = {
  // 其他图表配置省略
  series: params.length ? params : [{ data: [] }]
}

该方案保留组件默认的更新逻辑，params更新后图表会自动调用update方法刷新数据，无需额外手动操作。

方案3：强制销毁重建（仅适用于配置结构变动极大的场景） #

如果确实需要关闭增量更新，可以设置immutable={true}，同时保留allowChartUpdate为默认值true，组件会在props变化时销毁旧图表、用新配置重新初始化，也可以解决空数据报错问题，但性能相对前两种方案更低。

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