antd的table会渲染出多的数据的问题

antd的table会渲染出多的数据的问题

在模糊查询输入框输入“浙A8888”,发现查询结果有多余的两条数据,并且发现当清空查询条件,每次根据该查询条件查询都会多增加一条“浙A12345”的数据,如图:
antd的table会渲染出多的数据的问题
后来看控制台,一直在报key值不唯一的问题。发现后台返回两条id相同的数据,即车牌号码为“浙A12345”的数据:
antd的table会渲染出多的数据的问题
而界面恰好是拿该dispositionId作为key值的:
antd的table会渲染出多的数据的问题
因此就出现了key值不唯一的问题,也就造成了标题出现的问题,终于破案了~~
随后我把key设置为唯一值的时候发现该问题也解决了。

按照 React 的规范,所有的组件数组必须绑定 key。在 Table 中,dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。最后发现是由于设置的rowKey不是唯一的问题造成了此bug。