首页 » JS » 正文

antd Table组件 去除key、rowKey相关的Warning

使用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的值吗,在很多统计类的表中根本就没有唯一性的字段。

【解决办法】

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

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

【其他问题】

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

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

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

本文共 2 个回复

  • 菇菇 2019/08/06 17:45

    emmmm 一年了 antdesign也没更新 这个问题还是没有解决 😮

    • Kiddo 博主 2019/08/28 11:53

      @ 菇菇 可能antdesign想等react更新,在上游解决;或者开发者自己处理,在下游解决。。。

发表评论