React中如何在setState同函数内获取更新后的状态值

你遇到的问题是React新手常踩的一个坑：setState 是异步执行的——它不会立刻修改组件的state，而是把更新操作放入队列，等合适的时机批量处理。所以你在调用setState后马上打印this.state.count，拿到的自然还是更新前的旧值。

下面给你两种适配类组件场景的靠谱解决方案：

方法1：使用setState的回调函数 #

setState 支持传入第二个参数，这是一个回调函数，它会在state更新完成、组件重新渲染后触发，这时你就能拿到最新的state值了。

修改你的代码如下：

class Signup extends React.Component { 
  constructor() { 
    super(); 
    this.state = { count: 0 }
    // 别忘了绑定this，否则hndlChange里的this会指向undefined
    this.hndlChange = this.hndlChange.bind(this);
  } 
  hndlChange() { 
    this.setState({ count: this.state.count + 1 }, () => {
      // 这里打印的就是更新后的最新值
      console.log(this.state.count); 
    }); 
  } 
}

方法2：使用函数式更新（推荐依赖旧状态的场景） #

如果你的新状态是基于旧状态计算的（比如这里的count + 1），更推荐用函数式的setState写法。这种方式会接收上一次的state作为参数，确保你拿到的是最新的旧状态值，同时也能搭配回调函数获取更新后的state：

class Signup extends React.Component { 
  constructor() { 
    super(); 
    this.state = { count: 0 }
    this.hndlChange = this.hndlChange.bind(this);
  } 
  hndlChange() { 
    // 用prevState获取上一次的状态，计算新状态
    this.setState(prevState => ({ 
      count: prevState.count + 1 
    }), () => {
      console.log(this.state.count); // 这里拿到更新后的值
    }); 
  } 
}

这种写法的优势在于，当你多次调用setState时，能避免异步更新带来的状态覆盖问题，确保每次更新都是基于最新的前一次状态。

内容的提问来源于stack exchange，提问作者Kailash Choudhary