Ant Design Table组件报错,提示table should have a unique `key` prop的解决办法

在使用Ant Design for React对接数据时发现控制台报错如下:

Warning: [antd: Table] Each record in dataSource of table should have a unique `key` prop, or set `rowKey` of Table to an unique primary key, see https://u.ant.design/table-row-key 

ant table.png Ant Design Table组件报错,提示table should have a unique `key` prop的解决办法 经验总结

Ant Design Table组件的数据源必须用 "key" 属性吗?

其实不是必须的,我们在使用中会发现 "key" 是 mysql 的保留字段,很不方便。可以通过下面的方法解决:

可以给你的数据定一个 dataIndex 之类的值,最后会赋值到 react 的元素 key 上:

rowKey : record => record.dataIndex,

或者

rowKey : (record,index)=> index

我是通过下面的方法解决的:

<Table columns={columns} dataSource={list} rowKey={(record, index) => index} pagination={false} bordered />

这样就不会报错了。


我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=256wvnxmdw9ws

推荐阅读:

PhpStorm表单提交时获取不到post数据的解决方法

百度站长平台https站点提交sitemap显示“抓取失败”的解决方法

设置SSL后如何实现https自动跳转

phpsStorm实现打开*.jsp文件代码高亮和代码格式化

给网站添加熊掌号粉丝关注按钮

赞 (6)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)