如何禁用Material-UI Select选中项显示及正确传递MenuItem的key

一、禁用选中元素在选择框内的默认显示 #

Material-UI的Select组件提供了renderValue属性，通过自定义该属性可以完全覆盖选中项的默认展示逻辑。若要关闭选中项显示，直接让renderValue返回null或空字符串即可：

<FormControl>
  <Select
    multiple
    value={someCode}
    onChange={handleOnChange}
    className={classes.hiddenItem}
    renderValue={() => null} // 禁用默认选中项显示
  >
    {/* 菜单选项渲染 */}
  </Select>
</FormControl>

二、关于MenuItem的key值问题 #

你用item作为MenuItem的key是完全可行的——因为你的数据源是Set集合，集合内的元素本身具备唯一性，满足React对key的核心要求：在同级元素中唯一。只要item的值不会重复（Set天然保证这一点），就不需要额外的key字段。

三、修正代码中的语法错误 #

注意你的代码里setOfNewData.ma[((item) => ...)]是错误写法，Set对象没有map方法，需要先把Set转换成数组再进行映射：

<FormControl>
  <Select
    multiple
    value={someCode}
    onChange={handleOnChange}
    className={classes.hiddenItem}
    renderValue={() => null}
  >
    {Array.from(setOfNewData).map((item) => (
      <MenuItem key={item} value={item}>
        {item}
      </MenuItem>
    ))}
  </Select>
</FormControl>

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