如何在React的Material-UI多选框中设置对象列表为默认值

问题根因 #

Material-UI v4 的Select组件默认通过*严格相等比较（===）*判断选项是否处于选中状态。当你使用对象作为选项值时，默认值列表里的对象和下拉选项渲染时传入的对象是不同内存地址的引用，哪怕属性完全一致也会被判定为不相等，直接导致两个异常表现：

• 打开下拉框时默认值无法匹配到对应选项，没有选中标识
• 点击对应默认值的选项时，组件判定当前选中列表不存在该对象，会重复将其添加到选中值中

解决方案 #

方案1：使用唯一标识作为选中值（最推荐） #

不要直接将完整对象作为选中值，改用对象的唯一字段（如id、code）作为选中值，使用时再通过唯一字段映射回完整对象，完全符合MUI的设计逻辑，不会出现匹配异常。
示例代码：

const allOptions = [
  { id: 1, label: "选项A" },
  { id: 2, label: "选项B" },
  { id: 3, label: "选项C" }
];
// 选中值存储id数组，而非对象数组
const [selected, setSelected] = useState([1]);

const handleChange = (e) => {
  setSelected(e.target.value);
};

return (
  <Select multiple value={selected} onChange={handleChange}>
    {allOptions.map(opt => (
      <MenuItem key={opt.id} value={opt.id}>
        {opt.label}
      </MenuItem>
    ))}
  </Select>
)

方案2：手动实现对象匹配逻辑 #

如果业务要求必须保留对象数组作为选中值，需要手动覆盖默认的选中判断逻辑，同时在变更时做去重处理：

const allOptions = [
  { id: 1, label: "选项A" },
  { id: 2, label: "选项B" },
  { id: 3, label: "选项C" }
];
const [selected, setSelected] = useState([allOptions[0]]);

const handleChange = (e) => {
  const newVal = e.target.value;
  // 手动通过唯一id去重，避免重复添加
  const uniqueVal = newVal.reduce((res, cur) => {
    if (!res.find(item => item.id === cur.id)) res.push(cur);
    return res;
  }, []);
  setSelected(uniqueVal);
};

return (
  <Select
    multiple
    value={selected}
    onChange={handleChange}
    // 自定义选中值渲染逻辑
    renderValue={(selectedList) => selectedList.map(i => i.label).join(", ")}
  >
    {allOptions.map(opt => (
      <MenuItem key={opt.id} value={opt}>
        {/* 手动控制Checkbox选中状态，覆盖默认匹配逻辑 */}
        <Checkbox checked={!!selected.find(item => item.id === opt.id)} />
        <ListItemText primary={opt.label} />
      </MenuItem>
    ))}
  </Select>
)

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