React多选Select组件勾选单选项后所有选择项同步变更如何修复

• 核心问题是所有多选组件共用了同一套全局状态：从代码中Select绑定key={item.id}、onChange传递item.id的写法能看出，你是在列表循环中渲染了多个下拉多选组件，但所有组件的选中值都绑定了同一个exportOption状态变量，选中展示文本也共用了同一个selectedSelections/selectedOptionNames变量，修改任意一个的状态都会同步触发所有组件更新。
• 补充问题：handleSelect中接收的id参数完全没有被使用，没有做状态隔离。
• 小问题：FormControl标签后多了多余的}符号，renderValue返回的是固定全局变量，没有和当前项绑定。

步骤1：调整状态结构，按项id隔离存储 #

把原来的单值状态改成对象结构，用每个列表项的id作为key存储对应项的选中状态：

// 替换原来的单值状态声明
const [exportOptionMap, setExportOptionMap] = useState({})
const [selectedSelectionsMap, setSelectedSelectionsMap] = useState({})

步骤2：修改handleSelect逻辑，按id更新对应状态 #

const handleSelect = (e, id) => {
  let newValue = [];
  if (e.target.value.length) {
    newValue = e.target.value.filter((item) => {
      return item > 1;
    });
  }

  const finalString = newValue
    .reduce((acumulatedFinal, pass) => {
      return acumulatedFinal + ", " + exportOptionNames[pass - 1];
    }, "")
    .replace(",", "")
    .trim();

  // 仅更新当前id对应项的状态，不影响其他项
  setSelectedSelectionsMap(prev => ({
    ...prev,
    [id]: finalString.length ? finalString : "Export Option"
  }));
  setExportOptionMap(prev => ({
    ...prev,
    [id]: newValue
  }));
};

步骤3：修改Select组件的绑定逻辑，每个项读取自身对应状态 #

<FormControl>
<Select  
  onClick={(e)=> e.stopPropagation()}
  labelId="label"
  id={`select-${item.id}`}
  // 读取当前id对应的选中值，默认空数组
  value={exportOptionMap[item.id] || []}
  multiple
  onChange={(e) => handleSelect(e, item.id)}
  key={item.id}
  renderValue={() => {
    // 读取当前id对应的展示文本，默认提示语
    return selectedSelectionsMap[item.id] || "Export Option";
  }}
  input={<BootstrapInput />}
>
  <MenuItem value={1} disabled>
    Export Report
  </MenuItem>
  <MenuItem value={2}>
    <Checkbox checked={(exportOptionMap[item.id] || []).includes(2)} />
    <ListItemText>{exportOptionNames[1]}</ListItemText>
  </MenuItem>
  <MenuItem value={3}>
    <Checkbox checked={(exportOptionMap[item.id] || []).includes(3)} />
    <ListItemText>{exportOptionNames[2]}</ListItemText>
  </MenuItem>
  <MenuItem value={4}>
    <Checkbox checked={(exportOptionMap[item.id] || []).includes(4)} />
    <ListItemText>{exportOptionNames[3]}</ListItemText>
  </MenuItem>
</Select>
</FormControl>

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