ボタンのクリック時にsetState（）が状態を更新しない

Question

react-chartjs-2を使用して反応し、いくつかのチャートコンポーネントをテストしようとするのが初めてです。私は、更新ボタンを押したときに切り替える2つのテストデータオブジェクトを持っています。

メインAppコンポーネントは、Bar（react-chartjs-2から）とButtonコンポーネントを処理するように設定されています。 stateはBarに使用するデータオブジェクトを参照し、updatedという変数はhandleUpdate()メソッドで表示するデータを決定するために使用します。 Buttonは、それが小道具にonClickの基準として渡されるAppでhandleUpdate()メソッドを呼び出す必要がクリックされた

。メソッドはupdatedを評価し、setState()を使用して、使用されているデータを変更します。私はsetState()のコールバックを使って状態を記録し、updatedの値を変更しています。

import React from 'react'; 
    import ReactDOM from 'react-dom'; 
    import { Bar } from 'react-chartjs-2'; 

    const chart1 = { 
     labels: ['Team1', 'Team2', 'Team3', 'Team4', 'Team5'], 
     datasets: [{ 
     label: 'Team points', 
     data: [503, 385, 270, 133, 65], 
     backgroundColor: [ 
      '#4DB6AC', 
      '#E57373', 
      '#7986CB', 
      '#F06292', 
      '#E0E0E0' 
     ] 
     }] 
    }; 

    const chart2 = { 
     labels: ['Team1', 'Team2', 'Team3', 'Team4', 'Team5'], 
     datasets: [{ 
     label: 'Team points 2', 
     data: [303, 185, 470, 313, 65], 
     backgroundColor: [ 
      '#4DB6AC', 
      '#E57373', 
      '#7986CB', 
      '#F06292', 
      '#E0E0E0' 
     ] 
     }] 
    }; 

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

     this.handleUpdate = this.handleUpdate.bind(this); 

     this.updated = false; 

     this.state = { 
      chartData: chart1 
     } 

     console.log(this.state.chartData); 
     console.log(this.updated); 
     } 

     // Toggle between chart1 and chart2 based on value of updated 
     handleUpdate() { 

     if (!this.updated) { 
      this.setState({ 
      chartData: chart2 
      },() => { 
      console.log(this.state.chartData); 
      this.updated = true; 
      }); 
     } 
     else { 
      this.setState({ 
      chartData: chart1 
      },() => { 
      console.log(this.state.chartData); 
      this.updated = false; 
      }); 
     } 
     } 

     render() { 
     return(
      <div> 
      <Bar data={this.state.chartData} width={650} height={400} /> 
      <Button handleOnClick={this.handleUpdate} /> 
      </div> 
     ); 
     } 
    } 

    const Button = (props) => (
     <button id="update-chart" onClick={props.handleOnClick}>Update</button> 
    ); 

    ReactDOM.render(
     <App />, 
     document.getElementById('chart-container') 
    ); 

ボタンが意図したとおりにすべての作品をクリックする初めて、状態が更新され、コンポーネントの新しいデータを表示するために再描画します。ただし、それ以降のクリックでは、状態は変わらず、グラフは同じデータを参照し続けます。

console output - 最初のオブジェクトは最初のレンダリングで、その後の2つはボタンをクリックした後に記録されます。ご覧のように、データは最初のボタンのクリックで変更されますが、2回目以降のクリックでは変更されません。

私はsetState()が非同期であり、バッチ更新が可能であることを知っていますが、最初のクリックではうまく動作し、他のすべてのクリックではうまくいかず、なぜコールバックが呼び出されているのですか？ tは変わった。

編集：問題はreact-chartjs-2に関連していると思います。 import文を削除してBarコンポーネントをインポートし、代わりにBarをChartjsとは関係のない通常の関数コンポーネントとして定義すると、Appの状態は各クリックで2つのデータオブジェクト間で正常に変更されます。

したがって、データpropをreact-chartjs-2のBarコンポーネントに渡すことに関連しているようです。 Appの状態が変わるのをなぜ止めるのか分かりませんが、それはトップレベルのコンポーネントだからです。

Here is a JSFiddleBarを反応チャート2成分として使用しない場合の作用を示す。

Answer 1

私はこれをコメントとして使用したいと思っていますが、あなたが持っているものを正確に再現していて、あなたのエラーを再現することはできません。あなたのコードは解釈が難しく、それは私/私を捨てているかもしれません。これはあなたの実装です。handleUpdate

const chartData = this.updated ? chart2 : chart1 
this.setState({chartData},() => { 
    this.updated = this.updated ? false : true 
})