react-chartjs-2折线图在呈现时不会删除先前的折线图数据

Question

我有一个react-chartjs-2折线图，用于显示库存数据。父组件具有用于选择股票代码并提交的表格。它获取新的库存数据，并将其通过chartData传递给ScenarioLineChart。该组件将重新渲染并显示数据。

问题在于折线图中仍旧显示旧数据。我在调试器中检查了chartData，它具有预期的数据。但是，在Chrome的React Developer Tools中，它同时显示了两者。

redraw和destroy（）对这个问题没有影响。

ScenarioLineChart.jsx

import React from 'react';
import {Line} from 'react-chartjs-2';

class ScenarioLineChart extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};

    this.setChartData = this.setChartData.bind(this);
  }

  chartReference = {};

  componentDidMount() {
    console.log(this.chartReference); // returns a Chart.js instance reference
  }

  setChartData() {
    this.chartReference.chartInstance.destroy();
    this.props.setChartData();
  }

  render(state) {
    return (
      <div className="col-md-12">
      <Line
          data={this.props.chartData}
          redraw
          height={80}
          ref={(reference) => this.chartReference = reference }
          options={{
            maintainAspectRatio: true,
          }
        }
        />
      </div>
    );
  }
}

export default ScenarioLineChart;

Scenario.jsx

import React from 'react';
import * as zoom from 'chartjs-plugin-zoom';
import dateFormat from 'dateformat';
import { useTable } from 'react-table'
import ScenarioInfoTable from './ScenarioResults'
import ScenarioLineChart from './ScenarioLineChart'
import ScenarioForm from './ScenarioForm'

class Scenario extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      chartData: {},
      scenario: {},
      stocks: {},
    };

    this.setChartData = this.setChartData.bind(this);
    this.setScenario = this.setScenario.bind(this);
    this.setStocksData = this.setStocksData.bind(this);
  }

  setChartData = (chartData) => {
      this.setState({chartData})
  }

  setScenario = (scenario) => {
      this.setState({scenario})
  }

  setStocksData = (stocks) => {
      this.setState({stocks})
  }  

  render(state) {
    var today = new Date()
    return (
      <div className="container col-md-12">
        <div class="row">
          <ScenarioForm
            setChartData = {this.setChartData}
            setScenario = {this.setScenario}
            setStocksData = {this.setStocksData}
          />
          <ScenarioInfoTable scenario={this.state.scenario}/>
          <ScenarioLineChart
            chartData={this.state.chartData}
          />

        </div>
      </div>

    );
  }
}

export default Scenario;