MUI Select使用对象数组作为值时，如何取消预定义选中状态？

问题根源 #

你遇到的问题核心在于MUI多选Select对对象类型value的判断逻辑：它默认使用引用相等来识别选项是否已选中。你初始categories数组里的对象和categoryData映射出来的cat对象，虽然内容完全一致，但它们是两个独立的对象引用——就像两个长得一模一样但不同的盒子，MUI认不出来它们是同一个选项，所以当你点击取消时，它会把这个“新”对象又添加到选中数组里，而不是移除原有的。

解决方案 #

这里有两种可行的解决思路，你可以根据需求选择：

方案1：改用唯一标识（如_id）作为value（推荐） #

这种方法从根源上避免了对象引用的问题，因为字符串/数字的相等判断更可靠：

1. 修改MenuItem的value为cat._id，同时调整Checkbox的选中判断逻辑：

   {categoryData && categoryData.map((cat: any) => ( 
     <MenuItem key={cat._id} value={cat._id}> 
       <Checkbox checked={categories.some((el: any) => el === cat._id)} /> 
       <ListItemText primary={cat.name} /> 
     </MenuItem> 
   ))}
   

2. 调整初始state为_id的数组：

   const [categories, setCategories] = useState(["6311c197ec3dc8c083d6b632"]);
   

3. 更新renderValue，根据_id匹配对应的名称：

   renderValue={(selected) => 
     selected.map(id => categoryData.find(cat => cat._id === id)?.name).join(", ")
   }
   

4. 简化onChange逻辑：

   onChange={(event: any) => {
     const { target: { value } } = event;
     setCategories(value);
   }}
   

方案2：手动处理对象类型的选中逻辑（若必须保留对象作为value） #

如果业务需求必须传递整个对象，那么需要在onChange里手动判断选项是否已存在（通过_id而非引用）：

onChange={(event: any) => {
  // 获取当前点击的选项对象（MUI多选时，event.target.value最后一项是刚点击的选项）
  const clickedItem = event.target.value[event.target.value.length - 1];
  setCategories(prevCategories => {
    // 通过_id判断是否已选中该选项
    const isAlreadySelected = prevCategories.some(item => item._id === clickedItem._id);
    if (isAlreadySelected) {
      // 已选中则移除
      return prevCategories.filter(item => item._id !== clickedItem._id);
    } else {
      // 未选中则添加
      return [...prevCategories, clickedItem];
    }
  });
}}

原处理方式的问题总结 #

1. 对象引用不匹配：初始state的对象和数据源中的对象不是同一个引用，导致MUI无法通过引用相等识别已选中项。
2. 依赖默认onChange逻辑：直接使用event.target.value更新state时，MUI会直接追加点击的对象（因为它认为这是一个新选项），而不是移除原有的“相同内容但不同引用”的对象。

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