React等待多方法内多个异步setState完成后执行回调的方案

方案1：封装可等待的状态更新方法（适配所有React版本，逻辑最可控） #

核心思路是把原生不支持await的setState包装为Promise形式，不需要逐个给分散的setState手写回调，只需要统一替换调用入口即可。

• 类组件封装示例：

// 在组件内定义可await的setState方法
setStateAsync = (statePatch) => {
  return new Promise((resolve) => {
    this.setState(statePatch, resolve);
  });
};

• 函数组件封装示例：

// 封装useState的可等待更新方法
import { useState, useEffect, useRef } from 'react';
function useAsyncState(initialValue) {
  const [state, setState] = useState(initialValue);
  const resolveRef = useRef(null);
  useEffect(() => {
    if (resolveRef.current) {
      resolveRef.current(state);
      resolveRef.current = null;
    }
  }, [state]);
  const setStateAsync = (newValue) => {
    return new Promise((resolve) => {
      resolveRef.current = resolve;
      setState(newValue);
    });
  };
  return [state, setStateAsync];
}

使用时只需要把原有setState调用替换为await setStateAsync(xxx)，再把10个独立方法都标记为async，外层执行逻辑如下：

const runAllTasks = async () => {
  setLoading(true); // 开启loader
  try {
    // 等待所有方法内的同步逻辑、异步请求、setState全部执行完成
    await Promise.all([method1(), method2(), /* ... 剩下8个方法 */]);
  } finally {
    setLoading(false); // 所有操作完成后关闭loader
  }
};

如果觉得逐个替换setState麻烦，可以给组件的setState方法做一层全局代理，自动返回Promise实例，不需要修改业务方法内的代码结构。 #

方案2：基于事件循环时机等待（零业务代码侵入，不用改现有方法） #

如果不想修改现有10个方法里的任何代码，可以利用React状态更新的事件循环执行时机，等所有更新队列清空、重渲染完成后再关闭loader。
React的批量更新机制决定了：所有在同一轮调用栈里触发的setState，都会在当前宏任务的微任务队列清空后执行批量重渲染，重渲染完成后才会进入下一轮宏任务。基于这个原理可以写通用等待逻辑：

const runAllTasks = async () => {
  setLoading(true);
  try {
    // 先执行所有方法，收集方法返回的显式Promise（比如接口请求、async函数返回值）
    const taskPromises = [method1(), method2(), /* ... 剩下8个方法 */].filter(item => item instanceof Promise);
    // 等待所有显式异步任务执行完成
    await Promise.all(taskPromises);
    // 等待React清空所有setState更新队列、完成页面重渲染
    await new Promise(resolve => {
      // 两次微任务确保React更新调度启动，一层宏任务确保重渲染完成
      Promise.resolve().then(() => setTimeout(resolve, 0));
    });
  } finally {
    setLoading(false);
  }
};

注意：如果方法里存在定时器、跨组件事件触发的延迟setState，需要把这类长周期任务的Promise手动返回并纳入等待列表，否则会出现判断提前的问题。

方案3：React 18+ 专属：使用useTransition并发特性 #

如果项目使用React 18及以上版本，可以直接用官方提供的并发更新能力，不需要手动维护loading状态：

import { useTransition } from 'react';

function MyComponent() {
  // isPending由React自动维护，所有过渡更新完成后会自动变为false
  const [isPending, startTransition] = useTransition();

  const runAllTasks = () => {
    startTransition(() => {
      // 把10个方法的执行逻辑全部放到这里
      method1();
      method2();
      // ... 剩下8个方法
    });
  };

  return (
    <>
      {isPending && <Loader /> /* 直接绑定isPending控制loader显示 */}
      {/* 业务组件内容 */}
    </>
  )
}

这个方案的局限是：startTransition包裹的更新会被标记为非紧急更新，如果遇到用户输入等高优先级操作会被打断，如果要求所有更新必须按顺序执行不被打断，优先选择前两个方案。 #

避坑提醒 #

不要直接在逻辑执行的末尾同步调用setLoading(false)，此时同步代码虽然执行完了，但React的setState更新队列还没开始处理，页面重渲染还没完成，必然会出现loader提前关闭的问题。

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