Next.js Material UI useAutoComplete key属性传递警告问题解决

问题原因 #

你手动给<li>添加key={index}后，getOptionProps({ option, index })返回的props对象里已经包含了MUI自动生成的key属性，这就导致同一个元素上同时存在两个key值（你手动加的和钩子返回的），触发了React的警告。

解决方案 #

直接移除你手动添加的key={index}，让getOptionProps来负责提供合法的key值：

修改后的代码片段：

<Listbox {...getListboxProps()}>
  {(groupedOptions as typeof tags).map((option, index) => (
    <li {...getOptionProps({ option, index })}>
      <span>{option}</span>
      <CheckIcon fontSize="small" />
    </li>
  ))}
</Listbox>

补充说明 #

MUI的getOptionProps钩子会根据传入的option和index自动生成符合React要求的key，完全能满足列表渲染的需求，不需要手动重复添加。这样既解决了最初的“缺少key”警告，也不会触发后来的“props包含key被展开”的警告。

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