React＆Chartjs：鼠标悬停时图表重新呈现

如何解决React＆Chartjs：鼠标悬停时图表重新呈现

我的状态根据传入的道具而变化，然后触发重建图表。但是，似乎发生的是，当我将鼠标悬停在图表上时，它会显示旧数据，或者消失的数据然后重新出现。

以下是显示问题的gif文件：https://imgur.com/a/SQbhi9p

这是我的图表代码：

  static getDerivedStateFromProps(nextProps,prevState) {
    if (nextProps.pricesData !== prevState.pricesData) {
      return { pricesData: nextProps.pricesData };
    } else {
      return null;
    }
  }

  componentDidMount() {
    this.buildChart();
  }

  componentDidUpdate(prevProps) {
    if (!_.isEqual(this.props.pricesData,prevProps.pricesData)) {
      this.buildChart();
    }
  }

buildChart fn：

buildChart = () => {
    let datasets = [];
    if (this.state.pricesData) {
      this.state.pricesData.forEach((set) => {
        if (set.titel === "Competiors price") {
          let obj = {};
          obj.label = set.titel;
          obj.backgroundColor = set.color;
          obj.data = [0,set.price];
          obj.tooltip = set.tooltip;
          datasets.push(obj);
        } else {
          let obj = {};
          obj.label = set.titel;
          obj.backgroundColor = set.color;
          obj.data = [set.price,0];
          obj.tooltip = set.tooltip;
          datasets.push(obj);
        }
      });
    }
    const myChart = new Chart(this.chartRef.current,{
      type: "bar",data: {
        labels: ["Change=","Competitor"],datasets: datasets,},options: {
        legend: {
          display: false,title: {
          display: true,fontSize: 16,text: "Your estimated monthly costs",responsive: true,maintainAspectRatio: false,scales: {
          xAxes: [
            {
              stacked: true,],yAxes: [
            {
              stacked: true,ticks: {
                callback: function (value) {
                  return "€" + value;
                },});
    this.setState({ chart: myChart });
  };