React中setState回调函数似乎不生效，代码调试求助

嘿，我来帮你搞明白这个问题～你其实是混淆了setState的函数式更新和状态更新完成后的回调函数这两个概念啦！

核心问题：setState本身就是异步的 #

不管你用的是对象形式的setState({...})，还是函数形式的setState((prevState) => {...})，React的状态更新都是异步批量处理的。你现在代码里的console.log(this.state)是在setState调用之后立即执行的，这时候React还没完成状态更新，所以你看到的还是旧的state值。

正确的回调用法：setState的第二个参数 #

要在状态更新完成后拿到最新的state，你需要用setState的第二个参数——这才是官方所说的“回调函数”，它会在状态更新完成且组件重新渲染后执行。

修正后的代码应该是这样的：

addTodo() { 
  const text = prompt("TODO text please!") 
  this.setState(
    function(prevState){ 
      return {todos: [...prevState.todos, {id: id++, text: text, checked: false} ]} 
    },
    // 这才是状态更新完成后的回调
    () => {
      console.log(this.state) // 这里就能拿到更新后的todos数组啦！
    }
  )
}

再补充下函数式更新的作用 #

你用的函数式更新（接收prevState的那个函数）是用来解决状态依赖问题的：比如当你的新状态需要基于前一个状态计算时，用函数式更新能确保你拿到的是最新的prevState，而不是可能过时的this.state（因为异步更新的缘故）。但它本身并不会改变setState的异步特性，所以还是需要用第二个回调参数来在更新完成后执行操作。

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