修改状态后react-chartjs-2的Doughnut组件仍无法重渲染求助

核心问题分析 #

你遇到的问题本质是两个关键点：一是未正确获取Chart.js的底层实例，二是在图表未完成重绘时就调用了toBase64Image()方法。

具体解决步骤 #

1. 正确获取Chart.js实例 #

react-chartjs-2的组件ref指向的是封装后的React组件，而非Chart.js原生实例。必须访问组件的chart属性才能拿到真正的图表实例：

// 替换原代码中的chart获取逻辑
const chartInstance = this.chartRef.current.chart;
const img = chartInstance.toBase64Image();

2. 等待图表重绘完成后再获取base64 #

setState的回调仅表示state已更新，React已触发重渲染，但Chart.js的动画重绘可能还未完成。推荐两种可靠方式：

方式一：利用Chart.js的动画完成回调

在图表配置中添加animation.onComplete钩子，确保在图表完全渲染后获取base64：

createDoughnut() {
  // 深拷贝确保state引用更新
  const chartCopy = JSON.parse(JSON.stringify(this.state.chartOptions));
  
  // 替换（而非追加）数据，根据需求调整
  chartCopy.datasets[0].data = [
    this.state.Detractors,
    this.state.Passives,
    this.state.Promoters
  ];
  
  // 添加动画完成回调
  chartCopy.options = {
    ...chartCopy.options,
    animation: {
      onComplete: () => {
        const chartInstance = this.chartRef.current.chart;
        const img = chartInstance.toBase64Image();
        console.log(img); // 此时为最新图表的base64
      }
    }
  };

  this.setState({ chartOptions: chartCopy });
}

方式二：在组件更新生命周期中监听

类组件中使用componentDidUpdate，在数据变化后等待图表重绘完成：

componentDidUpdate(prevProps, prevState) {
  // 仅当chartOptions变化时执行
  if (prevState.chartOptions !== this.state.chartOptions) {
    // 延迟时间匹配Chart.js默认动画时长（可根据实际调整）
    setTimeout(() => {
      const chartInstance = this.chartRef.current.chart;
      const img = chartInstance.toBase64Image();
      console.log(img);
    }, 500);
  }
}

3. 修正数据更新逻辑 #

原代码中是将新数据追加到原数组末尾，若你的需求是替换原有数据（而非累加），需调整为直接赋值新数组，避免数据冗余导致的图表异常：

// 替换原追加逻辑
chartCopy.datasets[0].data = [
  this.state.Detractors,
  this.state.Passives,
  this.state.Promoters
];

4. 保留有效配置 #

继续使用深拷贝和redraw属性，确保React能识别到数据变化并触发重绘：

// 深拷贝保证state引用更新
const chartCopy = JSON.parse(JSON.stringify(this.state.chartOptions));

// 组件上保留redraw属性
<Doughnut
  redraw
  data={this.state.chartOptions}
  ref={this.chartRef as any}
/>

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