React中循环发起多个API请求时如何显示加载器

这个问题我之前也碰到过！核心原因是React 18的自动批量更新机制在搞鬼，咱们一步步拆解问题，再给出靠谱的解决方案：

问题根源 #

在React 18中，默认会对异步函数（比如你的fetchUsers）里的状态更新做批量合并处理。你代码里的执行流程是：

1. 调用setLoader(true)标记加载中
2. 立刻进入await getUsers()和后续的Promise.all异步请求
3. 请求完成后调用setLoader(false)结束加载

由于批量更新机制，React会把这两次状态更新合并，直接从初始的false跳到最终的false，中间的true状态根本不会触发页面渲染，所以加载器自然就显示不出来。

解决方案 #

方案1：用setTimeout延迟异步逻辑，让Loader先渲染 #

把后续的网络请求放在setTimeout里，给React留出时间完成setLoader(true)的渲染，再执行异步操作：

const [loader, setLoader] = useState(false);
React.useEffect(() => {
  const fetchUsers = async() => {
    setLoader(true);
    // 用0延迟让React先处理状态更新并渲染Loader
    setTimeout(async () => {
      const users = await getUsers();
      // 简化map逻辑，直接返回Promise即可，无需额外async/await
      const promises = users.map(user => getUsersDetailedData(user.userId));
      let finalUsers = await Promise.all(promises);
      // 记得把finalUsers存到对应的状态中，比如setFinalUsers(finalUsers)
      setLoader(false);
    }, 0);
  }
  fetchUsers();
}, [])

方案2：用flushSync强制同步更新状态 #

React提供了flushSync API，可以强制状态更新立即生效，跳过批量处理机制：

首先导入flushSync：

import { flushSync } from 'react';

然后修改你的代码：

const [loader, setLoader] = useState(false);
React.useEffect(() => {
  const fetchUsers = async() => {
    // 强制同步更新Loader状态，确保页面立即渲染加载状态
    flushSync(() => {
      setLoader(true);
    });
    const users = await getUsers();
    const promises = users.map(user => getUsersDetailedData(user.userId));
    let finalUsers = await Promise.all(promises);
    setLoader(false);
  }
  fetchUsers();
}, [])

额外提示：给Loader加最小显示时长 #

如果你的API请求速度极快，可能Loader刚显示就消失，看起来还是没效果。可以给setLoader(false)加一个最小延迟，确保用户能明确看到加载状态：

// 在Promise.all之后添加这一行
await new Promise(resolve => setTimeout(resolve, 500)); // 强制显示至少500毫秒
setLoader(false);

内容的提问来源于stack exchange，提问作者aanc.d