Chart.js和Canvas有问题

Question

我目前正在使用Graph.js来渲染它在初始渲染中正在处理的图形，但直到我按下setTimeformats按钮以便在同一画布上显示另一个图形，它才会给我错误：画布已经在使用中。必须先销毁ID为"0"的图表，然后才能重用画布。我用得对吗？我应该如何销毁图表以便在同一画布上使用其他图形？非常感谢您的帮助。

import React, { useRef, useEffect, useState } from "react";
import { historyOptions } from "../chartConfig/chartConfig";
import Chart from 'chart.js/auto';
interface Props{
data:any
}
const ChartData:React.FC<Props> = ({ data}) => {
const chartRef = useRef<HTMLCanvasElement | null>(null);
const { day, week, year, detail } = data;
const [timeFormat, setTimeFormat] = useState("24h");
const determineTimeFormat = () => {
switch (timeFormat) {
case "24h":
return day;
case "7d":
return week;
case "1y":
return year;
default:
return day;
}
};
useEffect(() => {
if (chartRef && chartRef.current && detail) {
const chartInstance = new Chart(chartRef.current, {
type: "line",
data: {
datasets: [
{
label: `${detail.name} price`,
data: determineTimeFormat(),
backgroundColor: "rgba(174, 305, 194, 0.5)",
borderColor: "rgba(174, 305, 194, 0.4",
pointRadius: 0,
},
],
},
options: {
...historyOptions,
},     
});
if (typeof chartInstance !== "undefined") chartInstance.destroy();
}
});
const renderPrice = () => {
if (detail) {
return (
<>
<p className="my-0">${detail.current_price.toFixed(2)}</p>
<p
className={
detail.price_change_24h < 0
? "text-danger my-0"
: "text-success my-0"
}
>
{detail.price_change_percentage_24h.toFixed(2)}%
</p>
</>
);
}
};
return (
<div  className="bg-white border mt-2 rounded p-3">
<div>{renderPrice()}</div> 
<div>
<canvas ref={chartRef} id="myChart" width={250} height={250}></canvas>
</div>
<div className="chart-button mt-1">
<button
onClick={() => setTimeFormat("24h")}
className="btn btn-outline-secondary btn-sm"
>
24h
</button>
<button
onClick={() => setTimeFormat("7d")}
className="btn btn-outline-secondary btn-sm mx-1"
>
7d
</button>
<button
onClick={() => setTimeFormat("1y")}
className="btn btn-outline-secondary btn-sm"
>
1y
</button> 
</div>
</div>
);
};
export default ChartData;

Answer 1

解决此问题的一种方法是，每次timeFormat更改时，使用新的状态变量和useEffect快速删除并重新创建画布元素。这里的一些关键点：

• 正如@CallumMorrisson所提到的，为了理解这种方法，阅读和理解React文档中关于跳过useEffect钩子的这一部分是非常重要的
• 直接在useEffect中使用day、name、week和year属性，而不是使用整个data变量，可以确保仅在必要时重新创建图表实例，而不是在每次渲染时重新创建。函数determineTimeFormat也是如此，如果可能的话，这些类型的函数应该在组件的范围之外定义

const determineTimeFormat = (
timeFormat: string,
day: any,
week: any,
year: any
) => {
switch (timeFormat) {
case "24h":
return day;
case "7d":
return week;
case "1y":
return year;
default:
return day;
}
};
interface Props {
data: any
}
const ChartData: React.FC<Props> = ({ data }) => {
const chartCanvasRef = useRef<HTMLCanvasElement | null>(null);
const { day, week, year, detail } = data;
const { name } = detail;
const [timeFormat, setTimeFormat] = useState("24h");
const [isRebuildingCanvas, setIsRebuildingCanvas] = useState(false);
// remove the canvas whenever timeFormat changes
useEffect(() => {
setIsRebuildingCanvas(true);
}, [timeFormat]); // timeFormat must be present in deps array for this to work
/* if isRebuildingCanvas was true for the latest render, 
it means the canvas element was just removed from the dom. 
set it back to false to immediately re-create a new canvas */
useEffect(() => {
if (isRebuildingCanvas) {
setIsRebuildingCanvas(false);
}
}, [isRebuildingCanvas]);
useEffect(() => {
const chartCanvas = chartCanvasRef.current
if (isRebuildingCanvas || !chartCanvas) {
return;
}
const chartInstance = new Chart(chartRef.current, {
type: "line",
data: {
datasets: [
{
label: `${name} price`,
data: determineTimeFormat(timeFormat, day, week, year),
backgroundColor: "rgba(174, 305, 194, 0.5)",
borderColor: "rgba(174, 305, 194, 0.4",
pointRadius: 0,
},
],
},
options: {
...historyOptions,
},
});
return () => {
chartInstance.destroy();
}
}, [day, isRebuildingCanvas, name, timeFormat, week, year]);
return (
<>
{isRebuildingCanvas ? undefined : (
<canvas ref={chartCanvasRef} id='myChart' width={250} height={250} />
)}
<button onClick={() => setTimeFormat("24h")}>24h</button>
<button onClick={() => setTimeFormat("7d")}>7d</button>
<button onClick={() => setTimeFormat("1y")}>1y</button>
</>
);
};
export default ChartData;