如何确保连续触发的状态更新全部执行

Question

如果我有多个状态更新，并且全部快速连续触发，则初始状态更新将不会完全更新，因为它们将被后续状态更新覆盖。我怎样才能使所有状态更新完全执行。下面是一些代码，可以粗略地了解我的意思：

            .start(() => {

              this.setState({message: "started"})

            })
            .progress(() => {
      
              this.setState({message: "progress"})}

            .finish(() => {

              this.setState({message: "finished"})

            })
    

这些函数被链接在一起并且将一个接一个地快速执行。我怎样才能执行所有状态更新。有没有比仅仅让每个状态更新返回一个承诺并等待它们更干净的方法？

Answer 1

不确定 setState 的用途，为了简单起见，使用新日志作为自己的状态的版本。这个想法（尽管有一些变化）也可以应用于 setState 如果它也用于日志记录：

const [fullLog,setFullLog] = useState<string[]>([]);

然后在您的逻辑中使用不同的方法调用 setter（改为使用函数）。

            .start(() => {
              setFullLog(current =>[...current ,"started"])
              this.setState({message: "started"})

            })
            .progress(() => {
              setFullLog(current =>[...current ,"processed"])      
              this.setState({message: "progress"})}

            .finish(() => {
              setFullLog(current =>[...current ,"finished"])
              this.setState({message: "finished"})

            })

简而言之：

setFullLog([...fullLog, newLog])

根据状态变量中的值设置值。

setFullLog(current =>[...current ,newLog])

根据当前/先前状态值设置值。因此，如果渲染之间发生两次状态更改，第一个版本不会获得 fullLog 变量的更新，而第二个选项始终具有实际的当前值（而不是变量的当前值）。

进一步阅读状态设置器：https://react.dev/reference/react/Component#setstate