react-chartjs状态更新错误

Question

我制作了一个React.JS组件，它使用react-chartjs包装器在chart.js库中绘制图表。我在更新时收到一个错误，好像我的数据被破坏了一样。我在想，也许上下文有问题，也许，因为我没有看到代码有什么问题。当第一次绘制图表时，它会显示得很好。setState原因：Uncaught Type Error: Cannot read property 'points' of undefined(...)发生在set.data.forEach()内部的core.js匿名函数中。下面是我的代码：

class Usage extends Component {

  constructor(props) {
    super(props);
    this.state = {
      active: true,
      new: false,
      chartData: []
    }
  }

  componentWillMount() {
    this.buildChartData();
  }

buildChartData() {
    const daysInMonth = 30;
    const graphs = [
      {title: 'Active Users', key: 'active', color: 'rgba(255, 99, 132, 1)'}, 
      {title: 'New Users', key: 'new', color: 'rgba(50, 25, 255, 1)'}
    ];
    let datasets = [];
    let labels = [];
    let labelsDone = false;

    graphs.forEach((graph) => {

      if (this.state[graph.key]) {
        let data = [];
        let backgroundColor = [];
        let borderColor = [];

        // XXX !!! for now
        if (!labelsDone) {
          for (let i = daysInMonth; i > 0; i--) {
            let d = new Date();
            // we stop yesterday
            d.setDate(d.getDate() - i);
            labels.push( (d.getUTCMonth() + 1) + '/' + d.getUTCDate() );
          }
        }
        labelsDone = true;

        for (let i = daysInMonth; i > 0; i--) {
          let d = new Date();
          // we stop yesterday
          d.setDate(d.getDate() - i);
          data.push( Math.round(Math.random() * 200));
          borderColor.push(graph.color);
          backgroundColor.push('rgba(0,0,0,0)');
        }
        let dataset = {
          data: data, 
          borderWidth: 1, 
          label: graph.title,
          fillColor: 'rgba(0,0,0,0.0)',
          strokeColor: borderColor
        };
        datasets.push(dataset);
      }
    })
    this.setState({
      chartData: {datasets: datasets, labels: labels}
    });
  }

  toggleCheckbox = label => {
    switch(label) {
      case 'Active Users':
        this.setState({
          active: !this.state.active
        });
        break;
      case 'New Users':
        this.setState({
          new: !this.state.new
        });
        break;
      default:
        console.log('Error: unhandled action');
        break;
    }
    this.buildChartData();
  }

  render() {
    return (
        <div style={{display: 'flex', flexDirection: 'row'}}>
          <div style={{flexDirection: 'column', marginLeft: '50px', marginRight: '50px', flexGrow: 1}}>
            <div style={{height: '20vh'}}>
              <div style={{flexDirection: 'row'}}>
                <Checkbox
                  label={'Active Users'}
                  handleCheckboxChange={this.toggleCheckbox}
                  isChecked={true}
                />
                <Checkbox
                  label={'New Users'}
                  handleCheckboxChange={this.toggleCheckbox}
                  isChecked={false}
                />
              </div>
            </div>
            <div style={{height: '75vh'}}>
              <Line data={this.state.chartData} options={chartOptions} />
            </div>
          </div>
        </div>
      );
  }
}

export default Usage;

我打印出了更小的数据集，在那里也会发生同样的事情。除了随机生成的值之外，没有看到任何差异。尽管如此，初始呈现仍然很好，但是setState (我理解为update )会导致上述错误。

Answer 1

如果传递到组件中的数据发生了更改，那么点将使用chart.js‘.update()在值之间动画。如果你想要在每一个变化上破坏和重新绘制图表，传递重绘作为一个支柱。例如，<LineChart data={this.state.chartData} redraw />

添加redraw解决了这个问题。