Ant Design Table组件唯一key警告问题求助

排查方向及解决方法 #

1. 改用函数形式配置rowKey #

虽然你已经设置了rowKey={'key'}，但尝试用函数形式明确指定唯一值，避免字段匹配的隐性问题：

<Table
  pagination={false}
  rowKey={(record) => record.key}
  dataSource={data}
>
  <Column
    title={t("geometryView.geometryInfo.geometryInfoTable.name")}
    width={'10%'}
    dataIndex="name"
    key="name"
  />
  <Column
    title={t("geometryView.geometryInfo.geometryInfoTable.vertices")}
    dataIndex="vertices"
    key="vertices"
  />
</Table>

2. 验证数据源key的唯一性 #

手动检查数据集中是否存在重复的key值：

// 检测重复key
const keySet = new Set();
const hasDuplicate = data.some(item => {
  if (keySet.has(item.key)) return true;
  keySet.add(item.key);
  return false;
});
console.log('是否存在重复key:', hasDuplicate);

如果存在重复，需要确保d.key本身是全局唯一的，或者更换其他唯一字段（如id）作为rowKey的取值。

3. 确认Column组件的正确导入 #

确保使用Ant Design Table官方的Column子组件：

import { Table } from 'antd';
const { Column } = Table;
// 或直接导入
import { Table, Column } from 'antd';

避免使用第三方封装或错误路径的Column组件，导致内部key机制失效。

4. 检查自定义渲染中的列表key（若有） #

如果后续为列添加了render函数且返回列表元素，必须为每个子元素添加唯一key：

<Column
  title="示例列"
  dataIndex="subList"
  key="subList"
  render={(items) => (
    <ul>
      {items.map(subItem => (
        <li key={subItem.uniqueKey}>{subItem.content}</li>
      ))}
    </ul>
  )}
/>

5. 升级Ant Design版本 #

部分旧版本Table组件存在rowKey处理的bug，尝试升级到最新稳定版：

npm install antd@latest
# 或使用yarn
yarn add antd@latest

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