antd的Table,因重复数据导致，切换页面时仍显示了上一页的某些数据

一朵小浪花儿

于 2020-12-02 17:52:49 发布

阅读量3.6k

点赞数 6

CC 4.0 BY-SA版权

文章标签： react javascript es6 vue.js

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/spray_wave/article/details/110492756

出现如标题所述bug，有两个原因

Table组件设置的rowKey不唯一
render函数执行时，虚拟dom的渲染机制

第一个原因，是因为rowKey设置的是每一列数据的id，而后台返回的数据有重复的，导致rowKey不唯一了
第二个原因，是因为render函数执行时，新旧两个虚拟dom树会进行对比，两棵dom树进行节点替换的依据就是key值，如果key值相同，说明是同一个元素，那么新的元素就会替换掉旧的元素。

所以，因为第一个原因导致key出现了重复，那么react虚拟dom去渲染的时候，替换掉其中一条数据之后，会以为其余重复的数据也替换掉了，从而导致，table表单切换页面的时候，出现额外展示上一页重复数据的情况

评论 4

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。