reactjs - 单击按钮时 React setState() 不更新状态

Question

我是 React 新手，正在尝试使用 react-chartjs-2 测试一些图表组件。我有两个测试数据对象，我希望在按下更新按钮时在它们之间切换。

主App组件已设置为处理Bar(来自react-chartjs-2)和Button组件。 state 引用用于 Bar 的数据对象，变量 updated 用于确定在 handleUpdate 中显示哪些数据() 方法。

当单击 Button 时，它应该调用 App 中的 handleUpdate() 方法，该方法作为 的引用向下传递>onClick 在 props 中。该方法评估 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 - 第一个对象是初始渲染，单击按钮后将记录后续两个对象。正如您所看到的，第一次单击按钮时数据会发生变化，但第二次或任何后续单击时不会发生变化。

我知道 setState() 是异步的，并且可能会批量更新，但我不明白的是为什么它在第一次点击时成功工作，但不是每次其他点击，以及为什么回调正在被调用，但状态没有改变。

编辑:我认为该问题与 react-chartjs-2 有关。 。如果我删除 import 语句来导入 Bar 组件，并将 Bar 定义为与 Chartjs 无关的常规函数​​组件，则状态每次点击时，App 都会成功在两个数据对象之间进行更改。

所以它似乎与将 data prop 从react-chartjs-2 传递到 Bar 组件有关。尽管我不确定为什么这会阻止 App 的状态发生变化，因为它是顶级组件。

Here is a JSFiddle展示了当不使用 Bar 作为react-chartjs-2组件时它是如何工作的。

Answer 1

我希望我可以使用它作为评论，但我正在重新创建您所拥有的内容，并且无法复制您的错误。你的代码很难解释，这可能会让我/我们失望。这是我对 handleUpdate

的实现

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