小编Bry*_*ata的帖子

我正在创建一个仪表板应用程序,它从端点获取数据并使用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}) …