Javascript 如何解决鼠标悬停在图表上会出现旧数据/图表的问题？

我使用useEffect将图表从chart.js渲染到画布。然而，当我将鼠标悬停在图表上时，我发现了旧图表显示的问题。从我在网上找到的源代码中，我意识到这个问题可能可以通过chart.destroy（）解决，但我不知道在我的代码中在哪里以及如何使用它。我已经附上了我的代码剪贴在这里，希望任何人都能帮助我

import React, { useEffect } from 'react';
import Chart from 'chart.js';
import { Card } from 'components/Card';
import { localDateTime, dateFilter } from 'helpers';

const red = '#644DFF';
const purple = '#F73F64';

const DailyTrafficCard = (props) => {
  const { store, capacity, data, setVar} = props;

  const lastSevenDays = Array(7)
    .fill()
    .map((_, i) => {
      const localdate = localDateTime(store);
      return localdate()
        .subtract(i, 'day')
        .format('YYYY-MM-DD[T]07:00:00[Z]');
    });
  useEffect(() => {
    const ctx = document && document.querySelector('#daily-traffic-chart');
    if (!ctx) {
      return;
    }
    const bar = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: [],
        datasets: [{
          data: data[data.length-1],
          barThickness: 13,
          backgroundColor: (ctx) => {
            const idx = ctx && ctx.dataIndex;
            const val = ctx && ctx.dataset && ctx.dataset.data && ctx.dataset.data[idx];
            return val < 40 ? purple : red;
          }
        }]
      },
      options: {
        intersect: false,
        legend: {
          display: false,
        },
        scales: {
          xAxes: [{
            type: 'time',
            offset: true,
            time: {
              unit: 'hour',
              displayFormats: {
                hour: 'HH',
              },
            },
            ticks: {},
            gridLines: {
              display: false,
            },
          }],
          yAxes: [{
            gridLines: {
              display: true,
            },
            ticks: {
              beginAtZero: true,
              min: 0,
              max: capacity,
              stepSize: 5
            },
          }],
        },
      }
    });

  }, [data,capacity]);

  const handleOnChange = (event) => {
    setVar(event.target.value);
  }
  return (
    <Card
      classname="DailyTrafficCard"
      icon={<span><i className="icon-user"/></span>}
      title={<h3>Daily Traffic Analytics</h3>}>
      <div className="daily">
        <div className="daily-head p-4 text-center">
          <select className="py-2 px-3" onChange={handleOnChange}>
            {lastSevenDays.map(date => (
              <option key={date} value={date}>{dateFilter(date, 'dddd')}</option>
            ))}
          </select>
        </div>

        <div className="px-8">
          {data && data.length > 0 && (
            <canvas width="250" id="daily-traffic-chart"></canvas>
          )}
        </div>
      </div>
    </Card>
  )
}

export {
  DailyTrafficCard
}

import React，{useffect}来自“React”；
从“Chart.js”导入图表；
从“组件/卡”导入{Card}；
从“helpers”导入{localDateTime，dateFilter}；
常数红色=#644DFF'；
常数紫色=#F73F64'；
const DailyTrafficCard=（道具）=>{
const{store，capacity，data，setVar}=props；
const lastSevenDays=数组（7）
.fill（）
.map（（u，i）=>{
const localdate=localDateTime（存储）；
返回localdate（）
.减去（i，“日”）
.格式（'YYYY-MM-DD[T]07:00:00[Z]”）；
});
useffect（（）=>{
const ctx=document&&document.querySelector（“#每日流量图”）；
如果（！ctx）{
返回；
}
常数条=新图表（ctx{
类型：'bar'，
数据：{
标签：[]，
数据集：[{
数据：数据[data.length-1]，
巴特希克内斯：13，
背景颜色：（ctx）=>{
const idx=ctx&&ctx.dataIndex；
const val=ctx&&ctx.dataset&&ctx.dataset.data&&ctx.dataset.data[idx]；
返回值<40？紫色：红色；
}
}]
},
选项：{
交集：错，
图例：{
显示：假，
},
比例：{
xAxes：[{
键入：“时间”，
对,，
时间：{
单位：小时，
显示格式：{
小时:"HH",，
},
},
滴答声：{}，
网格线：{
显示：假，
},
}],
雅克斯：[{
网格线：{
显示：对，
},
滴答声：{
贝吉纳泽罗：是的，
分:0,，
最大容量：，
步长：5
},
}],
},
}
});
}，[数据、容量]；
常量更改=（事件）=>{
setVar（event.target.value）；
}
返回(
{lastSevenDays.map（日期=>(
{dateFilter（日期，'dddd'）}
))}
{data&&data.length>0&&(
)}
)
}
出口{
每日交通卡
}