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

系统管理员 2023-06-07 10:52 1阅读 0赞

# 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_u.ant.design_table-row-key]

【原因】

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

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

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

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

【解决办法】

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

[https_u.ant.design_table-row-key]: https://u.ant.design/table-row-key
[https_ant.design_components_table-cn_]: https://ant.design/components/table-cn/#%E6%B3%A8%E6%84%8F
[React]: https://facebook.github.io/react/docs/lists-and-keys.html#keys