按照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相同,子级就无法找到父级了。