异步状态与导航场景下如何正确使用React useEffect

你现有逻辑的核心缺陷是把appInitialized === true作为了唯一的就绪判定条件，且用null同时代表「加载中」和「加载完成的合法空值」两种状态：

• appUser === null 可能是「用户信息还在请求中」，也可能是「请求完成，用户确实未登录」
• externalLink === null 可能是「深度链接还在解析中」，也可能是「解析完成，确实没有待处理的深度链接」
  一旦appInitialized先于另外两个状态的加载流程 resolve，逻辑就会拿加载中的默认null值做判断，触发错误跳转。

你提到的「非导航场景下原有写法可以运行」是成立的：普通UI渲染会跟着状态变化自动重绘，哪怕中间拿到了错误的null值，等后续状态更新后UI会自动纠正。但导航是一次性副作用，只要触发就会执行页面跳转，不会等后续状态修正，所以必须严格等所有状态达到终态再执行，不能依赖状态的更新顺序。

1. 先定义统一的状态就绪判定 #

不要依赖三个状态的更新先后，先明确「所有异步流程全部执行完成」的判断标准，只有满足这个条件才允许进入导航逻辑。
注意不要用业务值本身判断加载状态：建议给appUser、externalLink两个异步状态补充独立的加载完成标记，比如用户信息请求不管成功/失败都将userLoaded置为true，深度链接解析不管有没有匹配到链接都将linkParsed置为true，最终的就绪判定写法如下：

// 和状态更新顺序完全无关，只有三个异步流程全结束才会为true
const isAllStateReady = appInitialized && userLoaded && linkParsed;

2. 调整副作用逻辑，去掉顺序依赖 #

在useEffect里最先判断就绪状态，未就绪时直接中断执行，不做任何导航操作；等所有状态都为终态后，再按业务规则判断跳转目标：

useEffect(() => {
  // 任意状态没加载完就直接返回，不触发导航
  if (!isAllStateReady) return;

  // 走到这里三个值全是最终值，和更新顺序无关，判断逻辑稳定
  if (appUser) {
    if (externalLink) {
      // 根据externalLink跳转到对应页面
    } else {
      // 跳转到首页
    }
    return;
  }

  // 未登录分支
  if (externalLink) {
    // 暂存externalLink，等登录成功后再跳转
  }
  // 跳转到登录页
}, [isAllStateReady, appUser, externalLink]);

3. 增加防重复跳转保护 #

可以加一个ref标记避免重复触发导航，兼容React严格模式双调用、后续非预期状态变化导致的重复跳转问题：

const hasNavigatedRef = useRef(false);
useEffect(() => {
  if (!isAllStateReady || hasNavigatedRef.current) return;

  // 上述导航判断逻辑...

  // 导航执行完成后打标记
  hasNavigatedRef.current = true;
}, [isAllStateReady, appUser, externalLink]);

如果后续有登出、切换账号需要重新判定导航的场景，记得在对应业务逻辑里把hasNavigatedRef.current重置为false即可。

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