React组件Duplicate Key错误修复：Material UI Autocomplete分组问题

1. 确保分组key唯一且无冲突 #

分组时不要仅用首字母作为组的key，避免和列表项的key产生冲突，同时统一首字母的大小写规则，消除隐性重复：

// 分组时统一首字母为大写，并给组key添加前缀
const groupedData = _.groupBy(data, item => item.name.charAt(0).toUpperCase());

// 渲染分组
Object.entries(groupedData).map(([letter, items]) => (
  <div key={`group-${letter}`}>
    <Typography variant="subtitle2">{letter}</Typography>
    {items.map(item => (
      <MenuItem key={item.id} value={item}>
        {item.name}
      </MenuItem>
    ))}
  </div>
))

2. 列表项必须使用唯一标识作为key #

禁止用item.name或item.label作为key，优先使用后端返回的唯一ID（如item.id）；若后端未提供，可生成临时唯一标识：

// 给无唯一ID的项添加临时key
const dataWithUniqueKeys = data.map((item, idx) => ({
  ...item,
  uniqueKey: `${item.name}-${idx}-${Date.now()}`
}));

// 渲染时使用该唯一key
items.map(item => (
  <MenuItem key={item.uniqueKey} value={item}>
    {item.name}
  </MenuItem>
))

3. 排查后端数据的隐性重复 #

肉眼看不到不代表没有重复，用控制台打印验证key的唯一性：

// 检查分组key是否重复
const groupKeys = Object.keys(groupedData);
console.log("分组key是否重复：", new Set(groupKeys).size !== groupKeys.length);

// 检查列表项key是否重复
const itemKeys = data.map(item => item.id);
console.log("列表项key是否重复：", new Set(itemKeys).size !== itemKeys.length);

重点排查是否存在id重复但内容不同、或带空格/特殊字符的同名项。

4. 绝对禁止使用索引作为key #

用index作为key会在列表顺序变化、增删项时引发key不稳定或重复问题，必须替换为稳定的唯一标识。

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