web-dev-qa-db-ja.com

状態が更新されたときにグラフを更新しないreact-chartjs-2

エンドポイントからデータをフェッチし、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を正しくレンダリングしません。

javascriptreactjsreact-chartjs
13
Bryan Licata

私が目にする可能性のある問題は、ネストしたプロパティを変更するときに、それを更新しようとすることです。したがって、Doughnutがdataの一部を他のコンポーネントに渡している場合、プロップが変更されたことが通知されません。したがって、ディープクローンを行う必要があります。

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が提案するように、関数をバインドする必要がある場合もあります。

8
Tomasz Mularczyk

このリンクを確認してください。彼が関数をコンポーネントにバインドしていることがわかります。

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

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

状態変数を空にして、次のように再度入力することもできます

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

mdがmainDataの値で初期化されている間

0
Ahmad Elswerkey