Javascript ReactJs-无法使用setState更新状态

使用

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

函数时，没有任何内容得到更新。但是当我第二次执行它时，状态确实得到了更新。要使状态第一次得到更新，我缺少什么？

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

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

---

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

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

---

我从未见过React组件中的

state

作为类属性在构造函数之外初始化。您确定这是正确的吗？您的代码可能工作正常。当您执行

console.log（'stateAfter'，this.state）

时，您的状态是异步更新的，因此您实际上是在状态更新之前对其进行日志记录。我从未见过在构造函数之外的React组件中将

state

初始化为类属性。您确定这是正确的吗？您的代码可能工作正常。当您执行

console.log（'stateAfter'，this.state）

时，您的状态是异步更新的，因此您实际上是在状态更新之前记录它。