React+Ant Design下拉菜单多选过滤表格数据的问题

问题 #

1. 选中或取消下拉菜单项时，searchClinicianRoles数组被覆盖，无法正确维护选中状态
2. 下拉菜单仅支持单选，无法实现多选操作

解决方案 #

1. 开启下拉菜单多选功能 #

根据你使用的UI组件库，开启多选模式：

• 若用AntD的Select组件：添加mode="multiple"属性
• 若用MUI的Select组件：设置multiple={true}
• 其他组件库同理，找到对应开启多选的配置项

2. 完善过滤逻辑与数组更新 #

当前useEffect仅处理了"Super admin"的单一场景，需要优化逻辑以支持多角色筛选：

• 优先处理"Super admin"选中的情况，同时兼容其他角色的多选合并
• 无选中项时恢复显示全部数据

修改后的代码示例 #

const [searchClinicianRoles, setSearchClinicianRoles] = useState<string[]>([]);

useEffect(() => {
  // 处理包含Super admin的筛选逻辑
  if (searchClinicianRoles.includes("Super admin")) {
    // 筛选超级管理员数据
    const superAdminData = allAcls.filter(a => a.acl?.super_admin);
    // 提取除Super admin外的其他选中角色
    const otherSelectedRoles = searchClinicianRoles.filter(role => role !== "Super admin");

    if (otherSelectedRoles.length > 0) {
      // 筛选其他角色对应的数据（替换为你项目中实际的角色判断逻辑）
      const otherRoleData = allAcls.filter(a => 
        otherSelectedRoles.some(role => a.role === role)
      );
      // 合并结果并去重
      const combinedResult = [...new Set([...superAdminData, ...otherRoleData])];
      setFilteredAcls(combinedResult);
    } else {
      setFilteredAcls(superAdminData);
    }
  } else {
    // 处理普通角色多选或无选中的情况
    if (searchClinicianRoles.length === 0) {
      // 无选中项时显示全部数据
      setFilteredAcls(allAcls);
    } else {
      // 筛选多个普通角色对应的数据
      const filteredData = allAcls.filter(a => 
        searchClinicianRoles.some(role => a.role === role)
      );
      setFilteredAcls(filteredData);
    }
  }
}, [searchClinicianRoles, allAcls]);

// 下拉选中项处理逻辑（组件开启多选后，selectedItems会自动返回所有选中项数组）
onSelectedItemsChange={(selectedItems) => {
  const userRolesClicked = selectedItems.map(item => item.label);
  setSearchClinicianRoles(userRolesClicked);
}}

注意事项 #

• 替换代码中a.role === role为你项目中实际的角色校验逻辑（比如根据acl字段判断其他角色）
• 确保下拉组件已正确开启多选，否则selectedItems只会返回单个选中项，导致数组被覆盖的问题

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