自定义antd的table属性rowKey

  按照antd官网的说明,table属性rowKey是需要唯一的,如果不唯一,就会出现意想不到的问题。

  这不,有个列表页面的数据就是会存在相同的id,结果就出问题了。相同id的数据会一直保留在下一次查询结果中,于是页面就会出现相同的两条数据。一开始并不确定是相同rowKey导致的,后来看到官网如下图的

 

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

  如果 dataSource[i].key 没有提供,你应该使用 rowKey 来指定 dataSource 的主键,如下所示。若没有指定,控制台会出现以上的提示,表格组件也会出现各类奇怪的错误。

// 比如你的数据主键是 uid
return <Table rowKey="uid" />;
//
return <Table rowKey={record => record.uid} />;

  便尝试自定义rowKey来解决问题,得知rowKey可以返回一个函数,那加个随机数就可以了。

rowKey={record => record.id + Math.random()}

  本以为这就可以解决问题了,后来又发现上面代码导致的另一个问题。如果列表的数据是树形结构,也就是带children属性的,就无法正常显示children了。

rowKey={record =>record.children && record.children.length ? record.id : record.id + Math.random()}

  那最终的解决方案出来了,不过还是不能解决树形结构的数据如果存在相同id的情况。按理讲,是不会出现这种情况的,不然父级id相同,子级就无法找到父级了。

 

posted @ 2020-12-17 09:21  KaimZhou  阅读(9172)  评论(2编辑  收藏  举报