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或componentWillUpdate生命周期功能之一中调用plot函数。如果您使用的是budgetUsed，请务必检查budgetRemain和componentWillReceiveProps是否已更改将这些方法添加到您的类中，它们将由React自动调用。

在这里，您正在尝试将命令库（chart.js）映射到React的功能性质，并且通常最好使用React特定组件（如果可以的话）（肯定有一些好的React图表组件）。 / p>

Answer 2

我想出了这个问题。道具正在更新，但我使用的是基于componentWill生命周期方法的旧道具值。相反，我将其切换到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>
    );
  }
}

组件未同步更新

2 个答案: