구성 요소가 동기화되지 않음

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