reactjs - Chart JS & React：悬停时显示旧数据

Question

我已经面临这个问题 2 或 3 周了，我已经尝试了 stackoverflow 上的所有方法来修复它，但似乎不可能。

我有一些使用图表 js 库（版本 2.9.4）的图表，当我使用 React Hooks 更新一些数据时，新旧数据/图表相互重叠，并继续显示旧数据。

这是我的代码：

import React, { useEffect, useRef, useState } from 'react';
import { Chart } from 'chart.js';

import { barChartOptions } from './config';

const Bar = ({ data }) => {
  const chartContainer = useRef(null);
  const [, setChartInstance] = useState(null);

  useEffect(() => {
    if (chartContainer && chartContainer.current) {
      const context = chartContainer.current.getContext('2d');
      const newChartInstance = new Chart(context, {
        type: 'horizontalBar',
        options: barChartOptions,
        data,
      });
      setChartInstance(newChartInstance);
    }
  }, [chartContainer, data]);

  return <canvas ref={chartContainer} />;
};

export default Bar;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

任何帮助，将不胜感激

标签： reactjscharts