react-chartjs-2状态更新时图表不渲染问题求助

首先可以明确的是：你使用的生命周期方法是正确的。componentDidMount 中设置定时器、componentWillUnmount 中清除定时器的逻辑没有问题，组件不更新的根源在于状态更新的方式不正确。

问题原因：浅拷贝导致的状态突变 #

你当前使用 Object.assign({}, this.state.data) 来复制状态对象，但这只是浅拷贝。对于嵌套的数组（比如 datasets[0].data），浅拷贝只会复制引用，而非真正创建新的数组。这意味着你修改 datacopy.datasets[0].data[0] 时，实际上直接修改了原状态中的数组内容——React 依赖引用变化来检测状态更新，由于 datasets 和 data 的引用没有改变，它会认为状态没有变化，因此不会触发组件重渲染。

解决方案：创建深拷贝的状态副本 #

要解决这个问题，你需要对嵌套的对象和数组进行深拷贝，确保每一层都是新的引用。以下是几种可行的方式：

方法1：使用扩展运算符逐层复制

手动对每一层嵌套结构进行扩展，确保所有数组和对象都是新的引用：

increment() {
  // 逐层深拷贝数据结构
  const newData = {
    ...this.state.data,
    datasets: this.state.data.datasets.map(dataset => ({
      ...dataset,
      data: [...dataset.data] // 复制data数组
    }))
  };
  // 修改新数组的值
  newData.datasets[0].data[0] += 10;
  this.setState({ data: newData });
}

方法2：使用 JSON 序列化/反序列化（简单场景适用）

如果你的数据结构没有函数、Symbol 等特殊类型，可以用这种快速方式深拷贝：

increment() {
  const datacopy = JSON.parse(JSON.stringify(this.state.data));
  datacopy.datasets[0].data[0] += 10;
  this.setState({ data: datacopy });
}

方法3：使用工具库（如 lodash.cloneDeep）

如果项目中已经引入 lodash，可以直接使用 cloneDeep 方法：

import cloneDeep from 'lodash/cloneDeep';

// ...

increment() {
  const datacopy = cloneDeep(this.state.data);
  datacopy.datasets[0].data[0] += 10;
  this.setState({ data: datacopy });
}

关键注意事项 #

在 React 中，永远不要直接修改状态对象，必须通过创建新的副本并使用 setState 更新，这样 React 才能正确检测到状态变化并触发组件重渲染。

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