使用Ionic React 6与ChartJS渲染图表时Canvas重复使用错误求助

这个错误是因为Chart.js创建的图表实例未被正确销毁，当组件重新渲染时，同一个Canvas元素被多个图表实例占用导致冲突。以下是几种可行的解决方法：

方法一：用useRef保存并销毁图表实例 #

通过React的useRef钩子保存图表实例，在组件卸载时手动销毁旧实例，避免重复占用Canvas：

import { Bar } from "react-chartjs-2";
import { useEffect, useRef } from "react";

const Graph: React.FC = (props) => {
  const chartRef = useRef<any>(null);
  const data = {
    labels: ["Billable", "Non Billable"],
    datasets: [
      {
        label: "Billable Vs. Non Billable",
        backgroundColor: ["#36a2eb", "rgba(255,99,132,0.2)"],
        borderColor: "rgba(255,99,132,1)",
        borderWidth: 1,
        hoverBackgroundColor: "rgba(255,99,132,0.4)",
        hoverBorderColor: "rgba(255,99,132,1)",
        data: [65, 59],
      },
    ],
  };

  useEffect(() => {
    // 组件卸载时销毁图表实例
    return () => {
      if (chartRef.current) {
        chartRef.current.destroy();
      }
    };
  }, []);

  return (
    <div>
      <h2>bar example</h2>
      <Bar
        ref={chartRef}
        data={data}
        width={100}
        height={50}
        options={{ maintainAspectRatio: false }}
      />
    </div>
  );
};

export default Graph;

方法二：给图表组件指定唯一ID #

给Bar组件添加固定的id属性，让Chart.js基于这个ID管理实例，避免自动生成的ID冲突：

// 其他代码保持不变
<Bar
  id="billable-nonbillable-chart"
  data={data}
  width={100}
  height={50}
  options={{ maintainAspectRatio: false }}
/>

方法三：配置自动销毁实例（版本兼容前提下） #

在Chart.js的配置中启用destroyOnDestroy，确保组件卸载时自动销毁实例（需确认你的react-chartjs-2版本支持该配置）：

// 在options中添加配置项
options={{ 
  maintainAspectRatio: false,
  destroyOnDestroy: true
}}

优先推荐方法一，它能在组件整个生命周期内正确管理图表实例，彻底避免Canvas复用冲突。

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