React中setState与navigate执行顺序颠倒及状态更新失效问题

执行顺序颠倒的原因 #

你感知到的执行顺序颠倒并不是函数真的反过来运行了，本质是React状态更新的异步批量机制导致的错觉，和JS异步特性、调用栈逻辑有关，但不是你理解的函数执行顺序反了：

• 实际代码运行时setting()确实比goHome()先调用，但是setFinalInfo是React的状态更新方法，它不会同步修改状态、也不会阻塞后续代码执行，只是把更新请求推入React的内部调度队列，等当前所有同步代码执行完毕后才会真正处理状态更新、触发组件重渲染。
• 你调用完setting()之后立刻执行navigate跳转，此时状态更新还没被React处理，看起来就像跳转先完成、状态更新后触发，才会形成执行顺序颠倒的错觉。

另外你修改的async/await版本完全没有效果：await只有作用于Promise对象时才会等待后续代码执行，你的setting()函数没有返回任何Promise，await setting()会直接同步返回，执行逻辑和原始代码没有任何区别。

跳转后状态更新不生效的原因 #

navigate("/")触发页面跳转后，你当前调用setting()的页面组件已经被React卸载了，React默认会直接丢弃卸载组件上的所有状态更新请求，甚至会在控制台抛出「无法在未挂载组件上执行状态更新」的警告，所以状态更新自然不会生效。

正确实现顺序执行的方案 #

如果需要等状态更新完成后再跳转，可以用两种方案实现：

1. 利用useEffect监听状态变更触发跳转
   新增一个控制状态标记跳转需求，等状态更新触发重渲染后再执行跳转：

const [needNavigateHome, setNeedNavigateHome] = useState(false)

function sendAndMove() {
  setting()
  setNeedNavigateHome(true)
}

// 状态更新完成重渲染后才会触发useEffect执行跳转
useEffect(() => {
  if(needNavigateHome) {
    navigate("/")
  }
}, [needNavigateHome, navigate])

2. 使用flushSync强制同步更新状态（React 18+支持）
   如果不想新增状态，可以用React提供的flushSync方法强制跳过批量更新，同步完成状态修改后再跳转：

import { flushSync } from 'react-dom'

function sendAndMove() {
  flushSync(() => {
    setting()
  })
  // 此处状态已经更新完成，再执行跳转
  goHome()
}

注意flushSync会影响组件渲染性能，非必要场景优先用第一种方案。

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