React中useEffect调用Promise.all未完成resolve就返回空数组问题

API 探路者

2026-10-1

问题原因

Promise.all 仅支持传入一维 Promise 数组作为入参，你的代码通过两层 map 生成的是二维数组结构 [[Promise, Promise...], [Promise, Promise...]]，Promise.all 会将内层数组识别为普通非 Promise 值，无需等待异步请求执行就直接触发 then 回调，此时所有 fetch 逻辑都还没跑完，myArr 自然是空的。
代码存在不必要的嵌套 Promise 包装，逻辑冗余易出问题，且用外部数组接收异步返回结果的写法容易触发竞态问题，不推荐使用。

修复方案

使用 flatMap 替代外层 map，自动将两层遍历生成的二维 Promise 数组扁平化处理，同时直接通过 Promise.all 的返回值获取所有请求结果，无需外部数组中转：

export const CarComponent = () => {
  useEffect(() => {
    const fetchList = () => {
      Promise.all(
        // flatMap会自动把内层map返回的数组合并成一维数组
        Cars.flatMap((car) => 
          car.cars.map((id) => 
            fetch(`/api/=${id.id}`)
              .then((response) => response.json())
              .then((data) => {
                console.log(data);
                return data;
              })
          )
        )
      ).then((myArr) => {
        console.log("myArr", myArr); // 可正常拿到所有请求结果
      })
    };
    fetchList();
  }, []);
// 原有其余逻辑
}

也可以用 async/await 写法优化可读性：

export const CarComponent = () => {
  useEffect(() => {
    const fetchList = async () => {
      const promiseArr = Cars.flatMap(car => 
        car.cars.map(item => fetch(`/api/=${item.id}`).then(res => res.json()))
      )
      const myArr = await Promise.all(promiseArr)
      console.log("myArr", myArr)
    }
    fetchList()
  }, []);
// 原有其余逻辑
}