如何在Ant Design中实现带分组的分类选择器？

问题分析 #

你当前的代码存在几个关键问题导致无输出：

• options 属性错误使用嵌套数组（map 外层额外套了数组），不符合AntD Select要求的结构
• 每个选项缺少必填的 value 属性，组件无法识别选中值
• 未对带父分类的项做正确分组，仅简单提取标题，未形成层级结构

解决方案 #

先将原始分类数据转换为AntD Select分组选项所需的格式，再传入组件使用：

1. 编写数据转换函数

// 把原始分类数据转换成Select支持的分组格式
const transformCategories = (categories) => {
  const parentGroups = {};
  const independentItems = [];

  categories.forEach(category => {
    if (category.parentCategory) {
      const parentTitle = category.parentCategory.title;
      // 初始化父分组（如果不存在）
      if (!parentGroups[parentTitle]) {
        parentGroups[parentTitle] = {
          label: parentTitle,
          options: []
        };
      }
      // 将当前分类作为子选项加入对应父分组
      parentGroups[parentTitle].options.push({
        label: category.title,
        value: category._id
      });
    } else {
      // 无父分类的项直接作为独立选项
      independentItems.push({
        label: category.title,
        value: category._id
      });
    }
  });

  // 合并分组与独立项，生成最终options数组
  return [...Object.values(parentGroups), ...independentItems];
};

2. 在组件中使用转换后的数据

import { Select } from 'antd';

// 基于原始分类数据生成格式化后的选项
const formattedOptions = transformCategories(categories);

// 渲染Select组件
<Select
  placeholder="Select category"
  defaultValue={category}
  onChange={(e) => {
    setObjectData({
      ...objectData,
      category: e,
    });
  }}
  value={category}
  options={formattedOptions}
/>

代码说明 #

• 转换函数会遍历所有分类，自动将带父分类的项归类到对应父分组，无父分类的项作为独立选项
• 最终生成的结构完全匹配你期望的格式，确保AntD Select能正确渲染分组下拉菜单
• 每个选项都绑定了分类的_id作为value，保证选中值的准确性

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