組件未同步更新

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

作爲一種變通方法，你應該叫plot功能也在componentWillReceiveProps之一或componentWillUpdate生命週期功能。請記住檢查budgetUsed和budgetRemain是否更改，如果您使用componentWillReceiveProps。
將這些方法添加到您的類中，並由React自動調用它們。

在這裏，您試圖將一個命令式庫（chart.js）映射到React的功能性，並且通常最好使用React特定組件（如果可以的話）（肯定有一些好的React圖表組件）。

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> 
    ); 
    } 
}