ReactJs - 无法使用 setState 更新状态答案

【问题标题】：ReactJs - unable to update state with setStateReactJs - 无法使用 setState 更新状态
【发布时间】：2020-05-30 01:44:02
【问题描述】：

我在使用 setState 更新状态时遇到问题。

我有一个父组件，我在其中定义我的状态，以及一个应该更新状态的 handleClick 函数。

export default class Main extends PureComponent {

  state = { 
    selectedName: '',
    selectedTasks: [],
    data: [
      { 
        name: 'John', 
        tasks: ['vacuum', 'cut grass']
      },
      { 
        name: 'Jack', 
        tasks: ['cook breakfast', 'clean patio']
      }
   ]

  handleClick = e => {
    console.log('Name: ', e.name);
    console.log('Tasks', this.state.data.find(el => el.name === e.name).tasks)
    const { selectedName, selectedTasks } = this.state;
    this.setState({
      selectedName: e.name
      selectedTasks: this.state.data.find(el => el.name === e.name).tasks
    });
    console.log('stateAfter', this.state)
  };

  render() {
    const { data } = this.state;
    return (
      <div>
        <Child
          data={data}
          handleClick={this.handleClick.bind(this)}
        />
      </div>
    )
  }
}

我有一个将handleClick 作为道具的子组件。

export default class Child extends PureComponent {
  constructor(props) {
      super(props);
  }

  render() {
    console.log('data', this.props.data);
    return (
      <ResponsiveContainer width="100%" height={500}>
      <PieChart height={250}>
        <Pie
          data={this.props.data}
          onClick={this.props.handleClick}
        />
      </PieChart>
    </ResponsiveContainer>
    );
  }
}

当我第一次执行handleClick 函数时，没有任何更新。但是当我第二次执行它时，状态确实会更新。第一次更新状态时我缺少什么？

【问题讨论】：

我从未见过在 React 组件中将 state 初始化为构造函数之外的类属性。你确定那是正确的吗？
您的代码可能运行良好。当您执行console.log('stateAfter', this.state) 时，您的状态正在异步更新，因此您实际上是在状态更新之前记录它。

标签： javascript reactjs onclick setstate

【解决方案1】：

this.setState 是异步的。如果您希望在 setState 之后控制台记录您的状态，那么您必须通过回调来执行此操作。

this.setState({
   selectedName: e.name
   selectedTasks: this.state.data.find(el => el.name === e.name).tasks
}, 
() => {
   console.log('stateAfter', this.state)
});

【讨论】：