如何为React/Material UI Autocomplete组件添加唯一key解决重复key警告

问题原因 #

MUI Autocomplete 组件默认使用getOptionLabel返回的内容作为列表选项的key，你有两个选项的name都是Name B，因此触发了key重复警告。你给Autocomplete组件本身传的key={option => option.id}是无效的，这个属性是React用于识别组件实例的通用属性，不是Autocomplete用来配置选项唯一标识的参数。

解决步骤 #

如果你使用的是 MUI v5 及以上版本 #

直接给Autocomplete组件添加getOptionKey属性，指定用每个选项的id作为唯一标识即可，修改后的组件配置如下：

<Autocomplete
    id='search_freesolo'
    freeSolo
    selectOnFocus
    clearOnBlur
    handleHomeEndKeys
    autoHighlight
    onInputChange={handleInputChange}
    open={true}
    onOpen={() => setOpen(true)}
    onClose={() => setOpen(false)}
    loading={loading}
    // 删掉原来的key={option => option.id}，替换成下面的配置
    getOptionKey={option => option.id}
    options={options}
    getOptionLabel={option => option.name}
    // 其余配置保持不变
    // ...
/>

如果你使用的是 MUI v4 版本 #

v4没有getOptionKey属性，你需要在renderOption返回的根元素上手动指定唯一key：

renderOption={(props, option) => (
    <Box
        component='li'
        key={option.id}
        {...props}
    >
        {option.name}
    </Box>
)}

修改后即可消除key重复的警告。

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