React Native Expo中useEffect内异步调用仅在组件卸载时resolve的问题

你遇到的问题是函数组件中useEffect内的await直到组件卸载时才resolve，即使替换为立即resolve的Promise也存在同样现象，而类组件正常。以下是几个可能的原因和对应的排查/解决方法：

1. 函数命名冲突 #

你在useEffect内部将异步函数命名为fetch，这与React Native环境中的全局fetch API重名，可能导致变量遮蔽或环境执行异常。即使你的fetchStuff没有使用全局fetch，这种命名冲突也可能干扰JS引擎的执行调度。

解决方法：
将内部异步函数重命名，比如改为fetchData：

useEffect(() => {
  const fetchData = async () => {
    console.log('fetching')
    const stuff = await fetchStuff(depA, depB);
    console.log('fetched');
    setStuff(stuff);
  };

  fetchData();
}, [depA, depB]);

2. React Strict Mode的影响 #

Expo默认在开发模式下启用React Strict Mode，它会在开发阶段对组件进行双重挂载与卸载，用来检测潜在的副作用问题。这种额外的生命周期调用可能打乱异步任务的执行时机，出现看起来像是await挂起到卸载才resolve的现象。

解决方法：

• 临时关闭Strict Mode：在根组件中移除<StrictMode>包裹，或在Expo的app.json中修改相关配置，观察问题是否消失。
• 注意：Strict Mode仅在开发模式生效，生产环境不会有这个问题，若只是开发阶段异常，无需担心生产环境表现。

3. 异步任务的状态管理缺失 #

组件卸载时若未正确标记异步任务的有效性，可能导致任务在组件卸载后才完成并输出日志。同时需确认depA或depB是否在组件挂载后立即变化，导致useEffect重新执行，前一次异步任务被挂起。

解决方法：
添加挂载状态标志，避免组件卸载后执行无效操作，同时清晰追踪任务执行时机：

useEffect(() => {
  let isComponentMounted = true;

  const fetchData = async () => {
    console.log('fetching');
    const stuff = await fetchStuff(depA, depB);
    
    if (isComponentMounted) {
      console.log('fetched');
      setStuff(stuff);
    }
  };

  fetchData();

  return () => {
    isComponentMounted = false;
    console.log('unmount');
  };
}, [depA, depB]);

4. Expo开发模式的调度限制 #

在Expo的远程调试模式下，JS线程与原生线程的通信可能存在延迟，或者Dev模式下的调试钩子干扰了异步任务的执行调度。

解决方法：

• 关闭远程调试，切换为本地调试模式；
• 打包成生产版本测试，确认问题是否仅存在于开发环境。

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