Material UI的Autocomplete组件出现重复key'Device 846'警告如何解决？

解决方案 #

原因说明 #

你遇到的重复key警告是因为Material UI Autocomplete组件默认会将getOptionLabel返回的title字段作为每个列表选项的key值，当多个选项的title值重复时就会触发该警告。你的数据源中每个选项都携带了唯一的id字段，只要显式指定组件用id作为选项的唯一标识即可解决问题。

修复代码 #

在原有Autocomplete组件配置中新增getOptionKey属性即可，修改后的代码如下：

<Autocomplete
  multiple
  id="tags-standard"
  options={test}
  size="small"
  style={{ width: 180 }}
  getOptionLabel={(option) => option.title}
  // 新增以下行指定用唯一id作为选项key
  getOptionKey={(option) => option.id}
  renderInput={(params) => (
    <TextField {...params} variant="outlined" label="Device" />
  )}
  onChange={(object, value) => console.log(value)}
/>

额外校验 #

如果添加属性后警告仍然存在，可检查test数据源中是否存在id重复的条目，确保每个选项的id值唯一即可。

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