Antd列表unique key报错排查：多组件key是否重复？

首先明确：React的key属性仅要求在同一个列表的兄弟元素之间唯一，不同列表（比如你的MyScrap和MyBoard组件）之间的key重复不会触发这个警告，所以你的问题根源不在跨列表的id冲突上。

接下来按以下步骤排查：

• 检查key是否绑定到了列表循环的顶级子元素上
  比如使用Antd的List组件时，要确保key直接加在List.Item上，而非内部嵌套元素：

  // 正确写法
  <List dataSource={likedPosts}>
    {(item) => <List.Item key={item.id}>{item.title}</List.Item>}
  </List>
  
  // 错误写法（key加在了内部元素，List.Item无key）
  <List dataSource={likedPosts}>
    {(item) => <List.Item><div key={item.id}>{item.title}</div></List.Item>}
  </List>
  

• 验证单个列表内的id是否真的唯一
  可以临时给key加列表前缀测试（比如scrap-${item.id}或board-${item.id}），如果警告消失，说明对应列表内确实存在重复id，需要修正数据源的唯一性。

• 排查嵌套列表的key设置
  如果组件内部还有子列表，要确保子列表的每一项也添加了唯一key，不要只处理外层列表。

• 确认Antd组件的特殊key配置
  比如Antd的Table组件需要通过rowKey属性指定行的唯一标识，而非直接在TableRow上添加key：

  <Table dataSource={boardPosts} rowKey="id" columns={columns} />
  

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