React同一函数中两次setState：第二个覆盖第一个的解决方法

嘿，这个问题我太熟悉了！React的setState是异步批量更新的，所以你连续调用doFirst和doSecond时，第二个方法里的this.state还是更新前的旧值，导致doFirst的更新被覆盖，只有最后一次的idx生效。除了合并两个setState，还有两种靠谱的解决办法：

方法一：使用setState的函数式更新 #

React允许你给setState传递一个函数，这个函数会接收上一次的最新状态作为参数，这样就能确保每次更新都基于最新的状态值，不会被异步更新坑到。

修改你的代码如下：

doIt(idx, array) { 
  this.doFirst(array); 
  this.doSecond(idx); 
} 

doFirst(array){ 
  // 使用函数式更新，prevState是React保证的最新状态
  this.setState(prevState => ({
    test: {...prevState.test, array}
  })); 
} 

doSecond(idx) { 
  this.setState(prevState => ({
    test: {...prevState.test, idx}
  })); 
}

这种方式的好处是，不管你调用多少次setState，每个更新都会基于前一次的最终状态，完美解决异步更新的状态同步问题。

方法二：利用setState的回调函数 #

setState的第二个参数是一个回调函数，它会在状态更新完成并触发组件重新渲染后执行。你可以把doSecond放到doFirst的回调里，确保前一个状态更新完成后再执行下一个操作。

修改后的代码示例：

doIt(idx, array) { 
  // 把doSecond作为回调传给doFirst
  this.doFirst(array, () => {
    this.doSecond(idx);
  }); 
} 

doFirst(array, callback){ 
  this.setState(
    { test: {...this.state.test, array} },
    callback // 状态更新完成后执行回调
  ); 
} 

doSecond(idx) { 
  this.setState({ test: {...this.state.test, idx} }); 
}

这种方式适合你明确需要两个操作按顺序执行的场景，能保证doSecond拿到的是doFirst更新后的最新状态。

两种方法各有优势：函数式更新更通用，适合大多数独立的状态更新；回调法则更适合有明确执行顺序依赖的场景。你可以根据自己的业务需求选择~

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