コンポーネントが同期していない

Question

私は各ユーザーに関連する円グラフをレンダリングするコンポーネントを持っており、各ユーザーに固有の値を持っています。特定のユーザーの名前をクリックすると、指定したユーザーの値で円グラフが再描画されます。代わりに、最初のクリックで遅延され、別のユーザーをクリックするまで更新されません。たとえば、（提供されたリンクを使用して）ユーザー 'Bob Dickinson'をクリックすると、次のユーザー 'Eugine Smith'をクリックしてBob Dickinsonに関するデータを表示し、Eugine Smithの名前で表示するまで、円グラフはレンダリングされませんその後、コンポーネントは各レンダリングで遅れて表示されます。私は以下のコードと実際の例へのリンクをリストアップしました：

リンク：https://2b0057e3.ngrok.io/dashboard

StudentGraphコンポーネント：

import React from 'react'; 
import { Link } from 'react-router'; 
import { FormattedMessage } from 'react-intl'; 
import chart from 'chart.js'; 

export default class StudentGraph extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function 
    constructor(props) { 
     super(props); 
     this.plot = this.plot.bind(this); 
    } 
    plot(){ 
    var ctx = document.getElementById("graph2"); 
var data = { 
    labels: [ 
     "Budget Used", 
     "Budget Remaining" 
    ], 
    datasets: [ 
     { 
      data: [this.props.budgetUsed,this.props.budgetRemain ], 
      backgroundColor: [ 
       "#FF6384", 
       "#90ee90" 
      ], 
      hoverBackgroundColor: [ 
       "#36A2EB", 
       "#36A2EB" 
      ] 
     }] 
}; 
var myChart = new Chart(ctx, { 
    type: 'pie', 
    data: data 
}); 
} 

componentWillUpdate(){ 
    this.plot() 
} 



    render() { 
    return (
     <div> 
     <h3>Budget Started: 10,250.00</h3> 
     <h3>Budget Used: {this.props.budgetUsed}</h3> 
     <h3>Budget Remaining: {this.props.budgetRemain}</h3> 
      <div style = {{ width: '20%'}}> 
      <canvas id="graph2" width="100" height="100"></canvas> 
      </div> 
     </div> 
    ); 
    } 
} 

Answer 1

あなたがcomponentWillReceivePropsの一つでもplot関数を呼び出す必要があります回避策としてまたはcomponentWillUpdateライフサイクル機能。 componentWillReceivePropsを使用している場合は、budgetUsedとbudgetRemainが変更されているかどうかを確認してください。
これらのメソッドをクラスに追加すると、Reactによって自動的に呼び出されます。

ここでは、必須のライブラリ（chart.js）をReactの機能性にマッピングしようとしています。可能であれば、React specific componentsを使用する方が一般的です（そこには優れたReact Chartingコンポーネントがあります）。

Answer 2

私は問題を把握しました。小道具は更新していましたが、私はコンポーネントのライフサイクルメソッドに基づいて古い小道具の値を使用していました。代わりに私はそれをcomponentDidUpdateに切り替えて、以前に生成された値から外す代わりに、新しい小道具をつかんでいます。

import React from 'react'; 
import { Link } from 'react-router'; 
import { FormattedMessage } from 'react-intl'; 
import chart from 'chart.js'; 

export default class StudentGraph extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function 
    constructor(props) { 
     super(props); 
     this.plot = this.plot.bind(this); 
    } 
    plot(){ 
    var ctx = document.getElementById("graph2"); 
var data = { 
    labels: [ 
     "Budget Used", 
     "Budget Remaining" 
    ], 
    datasets: [ 
     { 
      data: [this.props.budgetUsed,this.props.budgetRemain ], 
      backgroundColor: [ 
       "#FF6384", 
       "#90ee90" 
      ], 
      hoverBackgroundColor: [ 
       "#36A2EB", 
       "#36A2EB" 
      ] 
     }] 
}; 
var myChart = new Chart(ctx, { 
    type: 'pie', 
    data: data 
}); 
} 

componentDidUpdate(){ 
    this.plot(); 
} 


    render() { 
    return (
     <div> 
     <h3>Budget Started: 10,250.00</h3> 
     <h3>Budget Used: {this.props.budgetUsed}</h3> 
     <h3>Budget Remaining: {this.props.budgetRemain}</h3> 
      <div style = {{ width: '20%'}}> 
      <canvas id="graph2" width="100" height="100"></canvas> 
      </div> 
     </div> 
    ); 
    } 
}