如何在React中使用includes()过滤嵌套数组实现多角色用户筛选

我有一批如下结构的用户资料：

"user": {
    "firstName": "Joe",
    "lastName": "Bloggs",
    "userRole": [
            {
                "id": 1,
                "name": "Role 001",
            },
            {
                "id": 2,
                "name": "Role 002",
            },
           { /* 更多角色 */ }
        ],
}

每个用户可能拥有多种角色组合。我需要根据指定的角色列表（比如["Role 001","Role 004"]）筛选用户，希望用includes()实现数组级别的匹配。

我的组件代码如下：

<Signoff
    name="sign"
    signOff={signOff}
    signUserRole={["Role 001","Role 004"]} {/* 不确定此参数定义是否正确 */}
    signHeaderTitle="Person signature required"
/>

用户Schema定义：

const userSchema = new Schema(
  {
    firstName: { type: String, required: true },
    lastName: { type: String, required: true },
    userRole: [
      {
        id: { type: Number },
        name: { type: String },
      },
    ],
  },
  { _id: true, timestamps: true }
);

原本的单选MUI Autocomplete筛选逻辑可以正常工作：

setSigneeOptions(
              responseData.users

                .filter((value) =>
                  value?.userRole?.name === signUserRole // 尝试实现类似value?.userRole?.name.includes(signUserRole)的逻辑
                    : 1 === 1
                )

                .sort((a, b) => (a.name > b.name ? 1 : -1))
            )

现在需要把MUI Autocomplete改成多选，不知道怎么修改筛选逻辑，只保留符合指定角色列表的用户选项，求指导。

解决方法 #

1. 参数定义没问题 #

你传的signUserRole={["Role 001","Role 004"]}是正确的，数组格式的角色列表完全符合需求。

2. 调整筛选逻辑 #

原代码里value?.userRole?.name是错误用法——userRole是数组，不能直接拿.name，得先把用户的所有角色名称提取成数组，再和目标角色列表做匹配。

情况1：用户有任意一个目标角色就保留

这是最常见的场景，用some判断是否有重叠角色：

setSigneeOptions(
  responseData.users
    .filter((user) => {
      // 提取当前用户的所有角色名称，空数组兜底避免报错
      const userRoles = user?.userRole?.map(role => role.name) || [];
      // 检查目标角色列表里是否有任意一个在用户角色中存在
      return signUserRole.some(targetRole => userRoles.includes(targetRole));
    })
    .sort((a, b) => {
      // 原代码的a.name不存在，改成拼接姓名排序
      const fullNameA = `${a.firstName} ${a.lastName}`;
      const fullNameB = `${b.firstName} ${b.lastName}`;
      return fullNameA.localeCompare(fullNameB);
    })
);

情况2：用户必须拥有所有目标角色才保留

如果要求用户同时具备列表里的所有角色，把some换成every就行：

return signUserRole.every(targetRole => userRoles.includes(targetRole));

3. 开启Autocomplete多选模式 #

别忘了给Autocomplete加上multiple属性，开启多选功能：

<Autocomplete
  multiple
  options={signeeOptions}
  getOptionLabel={(option) => `${option.firstName} ${option.lastName}`}
  renderInput={(params) => (
    <TextField {...params} label="选择签批人" placeholder="搜索用户" />
  )}
  // 其他你需要的配置项
/>

注意点 #

• 原筛选逻辑里的value?.userRole?.name是错误用法，因为userRole是数组，必须遍历提取每个角色的name。
• 排序时不要用a.name，用户结构里只有firstName和lastName，得拼接后再排序。

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