React应用中getReports等待setInOrder及循环未执行问题

核心问题 #

你之前误以为是异步等待的问题，但实际是**setInOrder返回的是普通对象而非数组**，导致sortedObjectsAll.length始终为0，循环无法触发。你的async/await其实已经生效了——从console.log(sortedObjectsAll)能正确打印结果就能证明这一点。

修正方案 #

提供两种可选的修正方式，根据你的业务需求选择：

方案1：修改getReports的遍历逻辑（适配现有setInOrder的返回值）

直接遍历对象的分组数组值：

export const getReports = async (objects) => {
  const sortedObjectsAll = await setInOrder(objects)
  
  console.log(sortedObjectsAll)

  const reports = [];
  // 遍历对象中所有分组后的数组
  for (const group of Object.values(sortedObjectsAll)) {
    console.log("现在会进入循环了")
    reports.push(createReport(group))
  }
  return reports
}

方案2：修改setInOrder返回数组格式（适配原循环逻辑）

如果业务更适合数组结构，调整setInOrder直接返回分组数组的集合：

export const setInOrder = async (objects) => {
  const sortedMap = new Map();

  for (const obj of objects) {
    if (sortedMap.has(obj.addedBy)) {
      sortedMap.get(obj.addedBy).push(obj);
    } else {
      // 初始化时直接存入当前对象
      sortedMap.set(obj.addedBy, [obj]);
    }
  }

  // 将Map中的分组数组转为数组返回
  return Array.from(sortedMap.values());
}

// 此时原`getReports`的循环可正常使用：
export const getReports = async (objects) => {
  const sortedObjectsAll = await setInOrder(objects)
  
  console.log(sortedObjectsAll)

  const reports = [];
  for (let j = 0; j < sortedObjectsAll.length; ++j) {
    console.log("进入循环")
    reports.push(createReport(sortedObjectsAll[j]))
  }
  return reports
}

原因说明 #

• 原setInOrder中用new Object()创建的是普通JS对象，普通对象没有length属性（仅数组/类数组对象有），所以sortedObjectsAll.length会被解析为undefined，在循环条件里自动转为0，导致循环直接跳过。
• Object.values(sortedObjectsAll)会提取对象中所有的属性值（也就是你分组后的数组），形成一个新的数组，这样就能正常遍历；或者用Map来存储分组，最后转为数组返回，直接适配原有的数组循环逻辑。

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