Next.js中Ant Design Table出现唯一key缺失警告求助

你遇到的警告并非来自你自己编写的.map代码，而是rc-table组件内部渲染表格行时缺少唯一key导致的，以下是排查和解决步骤：

• 检查rc-table的rowKey配置：rc-table要求必须为每行指定唯一key，默认不会自动生成可靠的唯一标识。你需要在Table组件上显式设置rowKey属性，值为数据源中每条数据的唯一字段名（比如id、assetId），示例：

  <Table 
    rowKey="id" 
    dataSource={yourAssetData} 
    columns={yourColumns}
    // 其他配置项
  />
  

  如果数据没有现成的唯一字段，可以用自定义函数生成：

  <Table 
    rowKey={(record) => `${record.type}-${record.name}`} 
    dataSource={yourAssetData} 
    columns={yourColumns}
  />
  

• 排查列渲染中的隐式列表：即使你注释了自己的.map，也要检查rc-table的列配置（columns数组）里的render函数，是否存在返回列表元素（比如多个<div>、<span>组成的集合）但未加key的情况。比如某列的render返回了数组，每个元素必须添加唯一key：

  const columns = [
    {
      title: '标签',
      render: (record) => record.tags.map(tag => <span key={tag.id}>{tag.name}</span>)
    }
  ]
  

• 确认数据源无重复标识：如果已经设置了rowKey但警告仍存在，检查你的dataSource中是否有重复的rowKey指定字段值（比如两条数据的id相同），这会导致React判定key重复，触发警告。

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