ReactJS新手求助：如何转换对象数组排序后的数据结构？

问题核心错误分析 #

1. 字符串排序逻辑错误：你用了数字排序的写法a.subsolution_name - b.subsolution_name，但subsolution_name是字符串类型，这种写法无法正确排序，应该使用字符串专用的localeCompare方法。
2. 结果结构嵌套错误：temp.push({numAscending})会将排序后的数组包裹在一个键为numAscending的对象中，导致结果结构不符合目标要求，需直接使用排序后的数组或匹配原结构的对象。

修正后的代码示例 #

场景1：groupedItems是子数组组成的数组

如果你的groupedItems是类似[[{subsolution_name: 'xxx'}, ...], [...]]的结构，直接对每个子数组排序后生成新数组：

// 直接通过map生成最终结果，无需临时temp数组
const numAscendingGroups = groupedItems.map(group => {
  // 浅拷贝原分组数组后排序，避免修改原数据
  return [...group].sort((a, b) => {
    // 按字符串自然顺序排序，支持多语言
    return a.subsolution_name.localeCompare(b.subsolution_name);
  });
});

console.log("排序后的分组数据", numAscendingGroups);

场景2：groupedItems是含子数组的对象数组

如果原结构是类似[{ key: 'xxx', items: [...] }, ...]的对象数组，需保留原对象属性仅排序内部数组：

const numAscendingGroups = groupedItems.map(group => {
  return {
    ...group, // 保留原对象的所有属性
    // 对items数组浅拷贝后排序
    items: [...group.items].sort((a, b) => a.subsolution_name.localeCompare(b.subsolution_name))
  };
});

额外优化说明 #

• 使用[...group]或[...group.items]做浅拷贝，是因为sort()是原地排序，会修改原数组，拷贝后排序能避免污染原始数据。
• 如果需要忽略大小写排序，可给localeCompare添加参数：

  a.subsolution_name.localeCompare(b.subsolution_name, undefined, { sensitivity: 'base' })
  

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