React MUI v4 Select组件带Checkbox多选时获取多值报错如何解决

问题原因 #

• Checkbox选中状态判断逻辑错误：你当前的写法是将单个option.id封装成数组后查找option.fullnames，二者完全没有关联，永远不会匹配到结果，导致选中状态显示异常。你遇到的option.id.indexOf is not a function报错，本质是数字类型的id本身没有indexOf方法，是之前的写法错误直接对option.id调用了该方法导致的。
• 你当前的renderValue直接拼接id数组，显示的是用户id而非用户名，可读性很差。

修复方案 #

1. 修正Checkbox选中判断 #

直接判断当前遍历的option.id是否存在于已选中的数组assignee_id中即可。

2. 优化选中值显示（可选） #

将选中的id数组转换为对应用户名后再拼接显示。

3. 获取完整选中用户信息 #

如果需要拿到选中用户的完整对象，直接对sysusers数组按选中id过滤即可。

完整修改后的代码 #

const [assignee_id, setAssigneeId] = useState([]);

// 如果需要获取选中的完整用户对象，直接用这个变量即可
const selectedUsers = sysusers.filter(user => assignee_id.includes(user.id));

<TextField
  id="outlined-select-user"
  select
  fullWidth
  variant="outlined"
  label="Select"
  multiple
  // 这里修改为显示用户名而非id
  renderValue={(selectedIds) => selectedIds.map(id => sysusers.find(u => u.id === id)?.fullnames).filter(Boolean).join(', ')}
  value={assignee_id}
  onChange={(event) => { 
    setAssigneeId(event.target.value); 
    // 这里event.target.value已经是选中的id数组，多选功能本身是正常的
    console.log("选中的用户id数组", event.target.value);
    console.log("选中的完整用户信息", selectedUsers);
  }}
  helperText="Please select a resource"
>
  {sysusers.map((option) => (
    <MenuItem key={option.id} value={option.id}>
      {/* 核心修改：判断当前id是否在选中数组中 */}
      <Checkbox checked={assignee_id.includes(option.id)} />
      <ListItemText primary={option.fullnames} />
    </MenuItem>
  ))}
</TextField>

补充说明 #

• MUI v4的Select组件只要添加了multiple属性，onChange返回的event.target.value默认就是选中值的数组，不需要额外处理多选的取值逻辑，你之前的问题完全是选中状态渲染错误导致看起来只能选单个。
• 如果需要兼容不支持Array.includes的旧浏览器，可以将assignee_id.includes(option.id)替换为assignee_id.indexOf(option.id) > -1，效果一致。

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