Material UI React多选Select组件多选后无法取消选择问题求助

你的问题出在选中状态的处理逻辑上，当同时选中1 Oranges和2 Grapes后取消其中一个时，现有逻辑没有正确处理剩余选中项的更新，导致状态无法正常变更。

修改后的核心处理逻辑 #

直接基于Material UI传递的newValue来处理所有选中规则，替换你原有的handleChange函数：

const handleChange = (event, newValue) => {
  let updatedSelection = [...newValue];

  // 规则：选中Apples时若同时选了其他选项，自动移除Apples
  if (updatedSelection.includes("0") && updatedSelection.length > 1) {
    updatedSelection = updatedSelection.filter(item => item !== "0");
  }

  // 规则：禁止所有选项被取消，若选中集合为空则默认选中Apples
  if (updatedSelection.length === 0) {
    updatedSelection = ["0"];
  }

  setSelected(updatedSelection);
};

逻辑说明 #

1. 自动移除Apples的场景：只要选中集合里包含0（Apples）且还有其他选项，就自动过滤掉0，符合你"选其他选项时Apples自动取消"的需求。
2. 避免空选中：当用户尝试取消最后一个非Apples选项时，选中集合会被重置为["0"]，满足"不能取消所有选项"的要求。
3. 支持多选取消：不管是取消1 Oranges还是2 Grapes，newValue都会正确传递剩余的选中项，直接基于这个值更新状态就能解决之前无法取消的问题。

这个逻辑不再依赖自定义变量，直接用组件自带的newValue处理，避免了取消操作时变量为空的问题，同时覆盖了你所有的需求规则。

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