Reducer中如何将分类数组过滤为树形结构？

我来帮你搞定这个嵌套分类的问题！你的需求是把最多3层嵌套的分类里所有子分类都存入options数组，核心问题应该是现有代码只处理了浅层子分类，没触达深层的嵌套项。下面给你一套清晰的解决思路和代码示例：

第一步：给分类做分组映射 #

先把所有分类按parent ID做分组，这样能快速定位任意父分类对应的子分类，不用每次遍历整个数组找子项，效率更高：

// 在你的reducer中处理拿到的categories数组
const categoryMap = categories.reduce((acc, category) => {
  // 把parent转为字符串，避免数字/字符串类型不匹配的问题
  const parentKey = String(category.parent);
  if (!acc[parentKey]) {
    acc[parentKey] = [];
  }
  acc[parentKey].push(category);
  return acc;
}, {});

第二步：递归遍历收集所有嵌套子分类 #

因为最多嵌套3层，咱们写一个递归函数，从顶级分类（parent=0）开始逐层遍历，把每一层的子分类都收集到options里，还能给标签加上层级路径（比如「Year 3 > 数学 > 进阶班」这种结构）：

// 递归收集子分类的函数，currentLevel控制层级上限（最多3层）
function collectNestedOptions(parentId, currentLevel, parentLabel = '') {
  // 获取当前父分类的所有子分类
  const children = categoryMap[String(parentId)] || [];
  // 超过3层就停止递归
  if (currentLevel > 3) return [];

  return children.flatMap(child => {
    // 生成带层级的标签（不需要层级的话直接用child.name即可）
    const currentLabel = parentLabel ? `${parentLabel} > ${child.name}` : child.name;
    // 先把当前子分类加入结果，再递归处理它的子分类
    return [
      { value: child.id, label: currentLabel },
      ...collectNestedOptions(child.id, currentLevel + 1, currentLabel)
    ];
  });
}

// 初始化options：从顶级分类（parent=0）开始，当前层级为1
const options = collectNestedOptions(0, 1);

方案为啥能解决问题？ #

你之前的代码应该只处理了parent=0的直接子分类，没有往下递归查找深层嵌套项。这个递归函数会自动遍历到第三层，把所有嵌套的子分类都捞出来，还能灵活保留层级关系，完全匹配你要的结构。

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