如何实现MUI Autocomplete中选项同时隶属于多个分组？

当前通过groupBy={(option) => option.native.groups[0]}仅能将用户显示在所属的第一个分组下，无法实现用户在所有所属分组中都展示的需求。解决思路是先将原始用户数据平铺展开，让每个用户在其所属的每个分组下生成独立选项，再进行分组。

步骤1：平铺用户数据 #

将每个用户按所属分组拆分，生成多条对应不同分组的用户条目：

// 原始用户数据示例
const originalUsers = [
  { id: 1, name: '用户1', native: { groups: ['分组1', '分组2'] } },
  { id: 2, name: '用户2', native: { groups: ['分组2', '分组3'] } },
];

// 平铺展开：每个用户的每个分组对应一条记录
const flattenedUsers = originalUsers.flatMap(user => 
  user.native.groups.map(group => ({
    ...user,
    currentGroup: group // 新增字段标记当前条目对应的分组
  }))
);

步骤2：配置Autocomplete #

使用平铺后的数据，基于新增的currentGroup字段分组：

import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

<Autocomplete
  options={flattenedUsers}
  groupBy={(option) => option.currentGroup}
  getOptionLabel={(option) => option.name}
  // 保证选中时，同一个用户的不同分组条目能被识别为同一选项
  isOptionEqualToValue={(option, value) => option.id === value.id}
  renderInput={(params) => <TextField {...params} label="选择用户" />}
/>

关键说明 #

• flatMap + map的组合实现了用户-分组的一对多展开，确保每个分组下都出现对应的用户
• 新增currentGroup字段避免修改原数据结构，同时为groupBy提供明确的分组依据
• isOptionEqualToValue配置解决了同一用户不同分组条目被误判为不同选项的问题，保证选中逻辑正确

内容的提问来源于stack exchange，提问作者Samuel Corsi-House