如何将银行工单分类数据按name分组适配react-select分组组件？

你可以通过Array.reduce()方法直接实现需求，以下是适配你数据结构的代码：

// 假设银行接口返回的完整数据存储在response变量中
const ticketCategories = response.body;

// 转换为react-select分组组件所需格式
const groupedOptions = Object.values(
  ticketCategories.reduce((grouped, item) => {
    // 按name字段创建分组
    if (!grouped[item.name]) {
      grouped[item.name] = {
        label: item.name,
        options: []
      };
    }
    // 将每个工单分类项转换为react-select要求的结构
    grouped[item.name].options.push({
      value: item.id, // 用唯一id作为value，便于后续获取选中值
      label: item.childrenName // 显示的分类名称
    });
    return grouped;
  }, {})
);

代码说明 #

1. 分组逻辑：通过reduce遍历原始数据，以name作为分组键，初始化每个分组的label和空options数组
2. 格式转换：将每个工单项的id作为value（保证唯一性），childrenName作为显示用的label，推入对应分组的options中
3. 最终结构：用Object.values()将分组对象转换为数组，得到完全符合react-select分组组件要求的格式

生成的groupedOptions结构如下（以你的数据为例）：

[
  {
    "label": "WTT",
    "options": [
      { "value": "8dc31d42-edf3-4e2a-aceb-ca0dbd8001b3", "label": "Verificar serviço de envio" },
      { "value": "a1eb77c0-a772-49e3-8775-9abe14c81002", "label": "Deletar imagem" },
      { "value": "9cb1658c-58af-424c-9b64-e2e2f90fd26e", "label": "Recuperar backup" }
    ]
  },
  {
    "label": "Sistemas MV",
    "options": [
      { "value": "4bf08032-7073-4e87-b565-90334c045ac1", "label": "Criar usuario" },
      { "value": "bf6be5f9-d53e-4502-9236-e3c25c6e83ea", "label": "Desbloqueio de usuario" },
      { "value": "3161ff31-d2b9-4609-8b56-ff1dc8f507fd", "label": "Alterar senha" }
    ]
  },
  {
    "label": "Email",
    "options": [
      { "value": "059f8977-1d36-4b99-9420-58431914087d", "label": "Esqueci minha senha" },
      { "value": "1b4fc962-ffd6-40f5-bebd-b35cbdca9224", "label": "Criação de nova conta" },
      { "value": "6a26e722-63e5-4957-9eeb-36e7cc85e695", "label": "Bloqueio de conta" }
    ]
  }
]

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