React中Material-UI v4多选择框如何设置默认选中值？

• MUI v4 多选Select组件判断MenuItem是否选中的逻辑是对value属性做全等（===）对比
• 你当前直接将完整对象作为MenuItem的value，默认值currentHistogramConfigurationList里的对象和下拉列表源configurationList里的对象虽然属性完全一致，但属于不同的内存引用，全等对比不通过，因此默认不会标记选中，再次点击时会作为新值追加到选中列表中，出现重复选项。

调整逻辑改为存储选中项的唯一标识_id而非完整对象，避免引用对比问题，修改后的代码如下：

/* 
全量配置列表：
configurationList = [
  {_id: '21375d87eed65e103c790121', configurationName: 'Regime1'},
  {_id: '21375d87eed65e103c790122', configurationName: 'Regime2'},
  {_id: '21375d87eed65e103c790123', configurationName: 'Regime3'}
]
默认选中配置：
currentHistogramConfigurationList = [
  {_id: '21375d87eed65e103c790121', configurationName: 'Regime1'}
]
*/

// 初始化时映射为id数组
const [histogrammeConfigIds, setHistogrammeConfigIds] = useStateWithDep(
  currentHistogramConfigurationList ? currentHistogramConfigurationList.map(item => item._id) : []
);

const handleChange = (event) => {
  console.log('*handle_Change', event.target.value);
  setHistogrammeConfigIds(event.target.value);
};

const handleDelete = (deleteId) => () => {
  console.log('*handle_Delete', deleteId);
  setHistogrammeConfigIds(prev => prev.filter(id => id !== deleteId));
};

// 工具方法：根据id获取配置详情
const getConfigById = (id) => configurationList.find(item => item._id === id);

//...
<Select 
  labelId='demo-mutiple-chip-label'
  id='demo-mutiple-chip'
  multiple
  value={histogrammeConfigIds}
  onChange={handleChange}
  input={<Input id='select-multiple-chip' />}
  renderValue={(selectedIds) => (
    <div className={classes.chips}>
      {selectedIds.map(id => {
        const config = getConfigById(id);
        return (
          <Chip
            key={config._id}
            label={config.configurationName}
            className={classes.chip}
            onDelete={handleDelete(config._id)}
          />
        );
      })}
    </div>
  )}
  MenuProps={MenuProps}
>
  {configurationList.map((item) => (
    <MenuItem
      key={item._id}
      value={item._id}
      style={getStyles(item._id, histogrammeConfigIds, theme)}
    >
      {item.configurationName}
    </MenuItem>
  ))}
</Select>

• 所有选中状态仅用唯一id做判断，字符串对比不存在引用不一致问题
• 删除逻辑简化为数组过滤，避免原splice操作可能带来的数组引用错误
• 渲染时再根据id匹配完整配置项，不影响原有展示效果

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