javascript - 在 React 类组件中，为什么在单击按钮的第一个实例中状态没有改变？但是在第二种情况下它会更新吗？

Question

在下面的代码中，当我第一次单击按钮时，它会打印原始状态值，即使使用 setState() 更改了状态。但是当我第二次点击按钮时，它会打印出新的状态值

import React, {Component} from 'react';

class App extends Component{
  state = {
    name:'Aneesh',
    age: '30'
  }

  handleClick= (event)=>{
    //this prints the original state
    console.log(this.state);
    this.setState({
      name:'Rayancha'
    })
    //This prints the original state in the first click and prints the new state after the second click
    console.log(this.state);
  }




  render(){
    return (
      <div>
        <h1>I am app component</h1>
        <p>My name is: {this.state.name} and my Age is {this.state.age}</p>
        <button onClick={this.handleClick}>Click Me</button>
      </div>
    )
  }
}

export default App;

Answer 1

setState 以异步方式工作。这意味着在调用 setState 之后，this.state 变量不会立即改变。因此，如果您想在状态变量上设置状态后立即执行操作然后返回结果，请使用回调。尝试使用回调函数如下:

handleClick= (event)=>{
    //this prints the original state
    console.log(this.state);
    this.setState({
      name:'Rayancha'
    }, () => console.log(this.state))
  }

这将确保在返回 setState 时调用 console.log。