使用antd的Table组件时,console面板经常会出现一些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的值吗,在很多统计类的表中根本就没有唯一性的字段。
【解决办法】
-
设置rowKey属性,指定值为唯一的字段
-
设置columns属性的配置中的key(好像主要是第一列),指定值为唯一的字段
【其他问题】
如果dataSource中每个字段的值都不是唯一的怎么办?
自己造一个‘key’字段吧,循环把index设置为‘key’的值就可以了
以上就是antd Table组件在console中经常出现key、rowKey相关的warning的解决办法,欢迎交流。
OlyLis 2019/11/22 15:58
index会变吧,那这key还有意义吗
eeyore 2019/11/18 09:34
可以把table里的index取出来就行
菇菇 2019/08/06 17:45
emmmm 一年了 antdesign也没更新 这个问题还是没有解决 😮
Kiddo 博主 2019/08/28 11:53
@ 可能antdesign想等react更新,在上游解决;或者开发者自己处理,在下游解决。。。