如何确保连续触发的React state更新全部执行？

React的setState采用异步批量更新机制，连续快速调用时，后续更新会基于同一个旧state快照执行，导致早期更新被覆盖。除了用Promise+await的方式，有两种更简洁的解决办法：

1. 使用函数式更新的setState #

把setState的参数从对象改成接收前一次state的函数，这样每次更新都会基于最新的state状态执行，不会被覆盖。

修改后的示例代码：

.start(() => {
  this.setState(prevState => ({ message: "started" }))
})
.progress(() => {
  this.setState(prevState => ({ message: "progress" }))
})
.finish(() => {
  this.setState(prevState => ({ message: "finished" }))
})

这种方式是React官方推荐的处理连续state更新的方案，完全契合React的状态更新逻辑，没有性能隐患。

2. 用flushSync强制同步更新（React 18+） #

如果你的项目使用React 18，可以使用flushSync强制让setState同步生效，避免批量更新导致的覆盖问题。需要先从react导入flushSync：

修改后的示例代码：

import { flushSync } from 'react';

// ...

.start(() => {
  flushSync(() => {
    this.setState({ message: "started" })
  })
})
.progress(() => {
  flushSync(() => {
    this.setState({ message: "progress" })
  })
})
.finish(() => {
  flushSync(() => {
    this.setState({ message: "finished" })
  })
})

注意：flushSync会打断React的批量更新优化，可能影响性能，只适合这种必须确保每个更新立即生效的场景，优先推荐第一种函数式更新的方式。

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