前端React：antd Table组件 去除key、rowKey相关的Warning

感谢鹊湖居士（https://www.linjiaqun.com/js/329.html），成功解决了问题，记录学习了，现转载如下：

React项目中总是存在Key相关的warning，这个不能忍！！！

目前遇到的warning有以下几个：

⑴设置了rowKey属性，但所指定字段的值不是唯一的

Warning: Each child in an array or iterator should have a unique "key" prop.

⑵未设置rowKey属性，不过设置了columns属性的配置中第一列的key（react所需），但key所指定字段的值不是唯一的

Warning: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.

⑶未设置rowKey属性，也未设置columns属性的配置中第一列的key（react所需）

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

【原因】

根据官方的说法 https://ant.design/components/table-cn/#注意  ，是蛋疼的react规范所造成的。

按照 React 的规范，所有的组件数组必须绑定 key。在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。

如果你的数据没有这个属性，务必使用 rowKey 来指定数据列的主键。若没有指定，控制台会出现以下的提示，表格组件也会出现各类奇怪的错误。

不过antd也是坑爹，在未指定的情况下就不能按循序，自动把index设置为key的值吗，在很多统计类的表中根本就没有唯一性的字段。

【解决办法】

1. 设置rowKey属性，指定值为唯一的字段

2. 设置columns属性的配置中的key（好像主要是第一列），指定值为唯一的字段

【其他问题】

如果dataSource中每个字段的值都不是唯一的怎么办？

自己造一个‘key’字段吧，循环把index设置为‘key’的值就可以了

 

以上就是antd Table组件在console中经常出现key、rowKey相关的warning的解决办法，欢迎交流。