使用Material UI Select组件出现禁止设置selected属性警告如何解决

Warning: Use the defaultValue 或 value 组件属性，不要直接设置selected属性。

• 值类型不匹配：Select组件绑定的空状态值为数字-1，但空选项的value为字符串'-1'，类型不一致导致value匹配失效，组件内部自动给option加selected属性触发警告
• 字段名大小写不统一：Select的value属性取props.currCompany.id（小写id），遍历公司列表时取company.Id（大写开头Id），字段名不匹配会导致选中值读取异常，触发匹配失败
• Material UI Select官方推荐搭配MenuItem组件使用，原生<option>标签的属性兼容逻辑也可能触发该警告

方案1：保留原生option写法 #

统一值类型和字段名即可：

1. 调整Select的value属性，统一字段名和值类型：

<Select
  onChange={props.changecompany}
  value={props.currCompany != undefined ? String(props.currCompany.Id) : '-1'}
>
  <option key={'empty'} value={'-1'}>
    None
  </option>
  {mapstructure()}
</Select>

2. 调整mapstructure函数，统一value的类型为字符串：

const mapstructure = () => {
  return companies.map((company) => (
    <option key={company.Id.toString()} value={String(company.Id)}>
      {company.Name}
    </option>
  ));
};

方案2：使用官方推荐的MenuItem写法（更稳定，无兼容问题） #

先导入MenuItem组件：

import MenuItem from '@mui/material/MenuItem'

替换原有Select及子组件代码，无需单独封装mapstructure函数：

<Select
  onChange={props.changecompany}
  value={props.currCompany != undefined ? String(props.currCompany.Id) : '-1'}
>
  <MenuItem key={'empty'} value={'-1'}>
    None
  </MenuItem>
  {companies.map((company) => (
    <MenuItem key={company.Id.toString()} value={String(company.Id)}>
      {company.Name}
    </MenuItem>
  ))}
</Select>

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