react-chartjs-2 状态更新时不更新图形

Question

我正在创建一个仪表板应用程序，它从端点获取数据并使用 setState 方法将端点返回的 JSON 中的变量分配给状态变量。当我更改状态时，'react-svg-gauge' 等组件会更新，但 'react-chartjs-2' 不会更新。

下面的代码是我的状态如何在我的实际应用程序中变化的示例。此示例将在 chrome 开发人员控制台中显示状态变量的正确值，但不会相应地更新 DOM。

import React, { Component } from 'react';
import {Doughnut} from 'react-chartjs-2';

class DoughnutExample extends Component {
  state = {
    data: {
        labels: [
            'Red',
            'Green',
            'Yellow'
        ],
        datasets: [{
            data: [300, 50, 100],
            backgroundColor: [
            '#FF6384',
            '#36A2EB',
            '#FFCE56'
            ],
            hoverBackgroundColor: [
            '#FF6384',
            '#36A2EB',
            '#FFCE56'
            ]
        }]
    }
  }

  componentDidMount() {
    this.timer = setInterval(
      () => this.increment(),
      1000
    )
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }

  increment() {
    let datacopy = Object.assign({}, this.state.data)
    datacopy.datasets[0].data[0] = datacopy.datasets[0].data[0] + 10
    console.log(datacopy.datasets[0].data[0])
    this.setState({data: datacopy})
  }

  render(){
    return(
      <div>
      <Doughnut data = {this.state.data}/>
      </div>
    )
  }
}

export default DoughnutExample;

我是否正确使用了生命周期方法？此代码将更新饼图的值、状态变量但不会正确呈现 DOM.

Answer 1

检查此 link。可以看到他把函数绑定到了组件上

https://codepen.io/gaearon/pen/xEmzGg?editors=0010

// This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);

Answer 2

我看到的潜在问题是您尝试更新嵌套的属性，同时对其进行变异。因此，如果 Doughnut 将 data 的一部分传递给其他组件，则不会通知它们 props 已更改。所以有必要做deep clone:

increment() {
    const datasetsCopy = this.state.data.datasets.slice(0);
    const dataCopy = datasetsCopy[0].data.slice(0);
    dataCopy[0] = dataCopy[0] + 10;
    datasetsCopy[0].data = dataCopy;

    this.setState({
        data: Object.assign({}, this.state.data, {
            datasets: datasetsCopy
        })
    });
}

您可能还需要像@Janick Fisher 建议的那样绑定函数。

Answer 3

您也可以清空状态变量并重新填充它喜欢

                this.setState({
                    mainData: {}
                });
                this.setState({
                    mainData: md
                });

而 md 已使用 mainData

的值初始化

react-chartjs-2 状态更新时不更新图形

react-chartjs-2 not updating graph when state updates

javascript

reactjs

react-chartjs