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

最新推荐文章于 2024-01-16 16:34:41 发布

一朵小浪花儿

最新推荐文章于 2024-01-16 16:34:41 发布

阅读量3.6k

点赞数 6

CC 4.0 BY-SA版权

文章标签： react javascript es6 vue.js

本文链接：https://blog.youkuaiyun.com/spray_wave/article/details/110492756

博客指出React Table组件出现bug，有两个原因。一是Table组件设置的rowKey不唯一，因后台返回数据id重复所致；二是render函数执行时，虚拟dom渲染机制中，新旧dom树对比依据key值替换节点，key重复会使虚拟dom误判，导致table表单切换页面展示上一页重复数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一朵小浪花儿

关注关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

antd嵌套表格遇到的小问题

lanseguhui的博客

05-25

1274

antd的api中嵌套表格的数据在expandedRowRender方法中，但是使用的时候不能在这个方法中进行ajax请求，expandedRowRender 实际上是在 Table 组件的 render 方法中调用的，React render 中用 ajax 会造成重复调用的问题，ajax -> setState -> render -> ajax-> setState -> render，循环往复。在expandedRowRender中进行render返回标签，在onExp

引用antd表格时使用rowSelection,切换分页时,之前选择的数据丢失

最新发布

weixin_44137098的博客

08-14

535

例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大)

4 条评论您还未登录，请先登录后发表或查看评论

antd Table表格分页数据为动态获取时，切换页码后保留之前页面选中数据状态的实现，以及数据刷新后选中状态仍保留问题的解决

lingliu0824的博客

09-08

6670

问题： antd Table提供了数据行可选择的操作，但是如果分页数据是从后端获取，切换页码后之前的分页数据就没有了，回到之前的页面选中状态也无法保留。解决：这里对ant Table表格组件进行了封装，实现了在分页数据动态获取时切换页码其他页选中的数据和状态仍保留的功能思路： 1.定义curPageSelectedRowKeys存储当前页选中数据的key值数组，selectedRows存储所有选中数据 2.监听当前页数据选中/取消选中和全选/取消全选操作，更新curPageSelectedRowKey

【ant-design】 a-table的rowKey出现重复的问题

piano_diano的博客

01-29

4481

背景今天在使用ant-design的a-table发生了一件诡异的事情，a-table可以设置数据选中的样式（多选或者单选），我设置为单选的时候，偶然间发现了3条数据竟然是连在一起选中的然后我右键检查标签，发现他们三条数据的row-key是一样的接着我看<a-table>中是怎么设置row-key的问题就在这，我的数据列中并没有id这个字段，我猜测这个是<a-table>自生成的（不管，先口胡一下。。）解决给r...

element中表格，表单等等重置之后依然显示上一次的数据

CHENC0518的博客

03-15

1127

1.造成这个问题的原因就是因为深拷贝和浅拷贝的问题，只需要对赋值的数据进行深拷贝即可。

React使用antd Table组件多选切换页同样选中

cdy_1的博客

01-16

1469

就是本来选中了第一页的数据，再切换到第二页选择时，第一页选中的数据就没了，相信大家会经常遇到这个问题。要解决这个问题就只能利用table组件所提供的另外两个事件了，onSelect和onSelectAll，用onSelect这个来实现单行的选中和取消选中，onSelectAll实现整页的选中和取消选中。这个问题的原因是因为我们正常列表都是分页请求数据，在切换到第二页时，其实第一页的数据就已经没有了，会重新请求第二页的数据；当点击选中时就只有第二页数据了，所以选中的也只会是当前页的数据，其他页的就丢了。

小程序 tab标签切换时出现数据状态保留的问题

spfLinux的博客

02-02

7065

出现的问题就是例如在女装时点击了销量最多，然后点击男装，发现男装的小编推荐既然对应的是销量最多的界面，当时就懵逼了。后来检测才发现，我的代码在点击销量最多和价格最优的时候对设置的初始模拟数据进行了直接操作，导致其数据本身发生变化。导致切换女装/男装时初始界面(数据)不对。主要场景是：点击女装，再点击男装，再点击女装。后面我在onload里存储了女装和男装的初始数据，并且后面的操作数据都

antd table 多选数据缓存问题

黑山老妖的小站

11-07

2469

业务需求：可以勾选当前页数据、下一页数据进行批量操作。其实antd本身可以支持上述业务需求。但：出现的问题如下（1）当我勾选多条并点击批量拒绝后，再次多选进行操作时，查看选中数据不仅仅是当前选中的数据，还包含上次选中的数据。（2）当我选中多条进行操作成功后，之前被选中的数据依然被选中解决方案： antd自带的示例demo其实是有问题的。不能将onchange事件都放在st...

基于Vue实现tab栏切换内容不断实时刷新数据功能

08-30

首次加载页面时，仅需请求第一个Tab的数据。在jQuery中，我们可以创建一个定时器数组，存储每个Tab的请求函数，然后通过切换Tab来清除和设置定时器。但这种方式并不适用于Vue，因为Vue更注重数据驱动和组件化。 ...

解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

10-15

本文将深入探讨如何解决在切换ElementUI的tab页后，`el_table`的固定列下方出现多余线条的问题，以及与之相关的固定列显示不全的场景。首先，让我们分析问题的现象：在切换ElementUI的tab组件时，`el_table`的固定...

ng-zorro-antd的loading用法，解决点击tab页时数据显示延迟或者点击清空数据加载数据很慢的问题

qq_36557846的博客

10-29

1849

需求描述使用ng-zorro-antd中的标签页插件，点击tab页签，表格中的数据会出现一种现象：显示上一个tab的数据2s后，才会变成当前tab对应的表格数据，用户体验不好解决方法：使用loading组件 sckg-todo.module.ts import { NzSpinModule } from 'ng-zorro-antd'; @NgModule({ imports: [ NzSpinModule ] }) sckg-todo.html <nz-table #smal

Ant Design of Vue 表格数据重复渲染

qq_42957667的博客

08-26

2722

Ant Design of Vue 表格数据重复渲染初次使用Ant Design of Vue 框架遇到表格数据重复渲染的解决办法重要的都标注了就是这样的表格 // 组件 <a-table :columns="columns" :data-source="mainDatas" class="components-table-demo-nested" bordered :pagination="pagination" @expand="clickExpand" // 展开图标触发

Ant Design rowKey导致的诡异重复、无效数据问题

lonelymanontheway的博客

02-28

3347

React Ant Design table rowKey导致的后端接口返回一条数据，但是列表页展示多条数据，且无效数据无法操作的诡异问题

layuiAdmin+springboot项目标签页切换会出现上一次标签页内容

qq_42257131的博客

04-14

449

1.首先介绍下背景：我之前是从layui免费版转到layuiAdmin的，之前用免费版的时候没有这个问题情景类似于下图： 2.解决办法：将layuiAdmin中的后台布局中主体内容中的部分代码注释或者删除，如下所示： <div class="layui-body" id="LAY_app_body"> <div class="layad...

ant design-vue的table表格添加rowkey的三种方式

nyf_unknow的博客

03-30

9643

项目场景：知识产权模块展示表格数据问题描述控制台给出警告原因分析：未按照组件要求添加key 属性作为唯一的标识。解决方案：方法1：:rowKey=“record=>record.number”  <a-table ref="table" size="middle" :rowKey="record=>record.number" :colu

antd中Transfer穿梭框数据显示问题

Femi的博客欢迎大家

07-08

4394

新接手的react项目中，有需求要在结构中渲染多个穿梭框，实际表现是框出来了，只有第一个穿梭框中的数据正常显示，如下图数据都是有的，就是不显示出来，勾选上就会展示，或者不使用map循环渲染的方式直接多个列出来也会正常展示。原因：Transfer 默认使用了 react-lazy-load 优化性能，可以通过设置 lazy={false} 关闭懒加载。 ...

table显示树形数据时row-key取值导致的key值可能重复

xuxiutang的博客

08-25

626

解决：给row-key属性赋值一个唯一的属性。

antd中树形表格tab切换时出现表格数据不清空的情况

RyleeLouth的博客

02-24

1516

大家肯定会有这样的需求，表格需要进行数据切换，antd很强大，当你的数据是树形结构时，会自动生成树形表格，就像下面这样（图为官网图片）但是你会发现，当你需要切换表格数据的时候，会出现表格数据不清空的情况，上一个tab的数据会掺杂在下一个tab中，这个问题让我非常苦恼，这是因为antd在进行切换表格数据的时候没有清空数据，所以出现了这样的情况，解决方案：在切换数据的函数里面加上这样一句话来清空数...

解决在分页的时候出现重复数据的问题

library_yb的博客

06-14

4676

如果查询条件不正确，就可能会导致查询到的数据不是想要的数据，从而出现重复数据的情况。另外，如果没有正确地设置排序方式，就可能会导致数据的顺序不正确，从而出现重复数据的情况。在分页时，通常是通过查询数据库中的数据，然后根据指定的页码和每页显示的数据条数来获取对应的数据。如果计算起始位置和结束位置的逻辑有误，就可能会导致数据的重复或者遗漏。总之，分页出现重复数据的原因可能是多种多样的，需要仔细检查分页逻辑的实现，确保查询条件、排序方式、起始位置和结束位置等参数的正确性。

antd vue table 显示页大小

06-10

您可以使用 antd vue 的 Table 组件的 pageSize 属性来设置每一页显示的数据条数。以下是一个示例代码： ```html <template> <div> <a-button @click="changePageSize(10)">10 条/页</a-button> <a-button @click="changePageSize(20)">20 条/页</a-button> <a-button @click="changePageSize(50)">50 条/页</a-button> <a-table :columns="columns" :data-source="dataSource" :pagination="pagination" /> </div> </template> <script> import { Table, Button } from 'ant-design-vue'; export default { components: { 'a-table': Table, 'a-button': Button, }, data() { return { columns: [ { title: '姓名', dataIndex: 'name', key: 'name' }, { title: '年龄', dataIndex: 'age', key: 'age' }, { title: '地址', dataIndex: 'address', key: 'address' }, ], dataSource: [ { name: '张三', age: 18, address: '北京市海淀区' }, { name: '李四', age: 20, address: '上海市浦东新区' }, { name: '王五', age: 22, address: '广州市天河区' }, ], pagination: { showSizeChanger: false, // 禁用 pageSize 切换器 defaultPageSize: 10, // 默认每页显示 10 条数据 }, }; }, methods: { changePageSize(pageSize) { this.pagination.defaultPageSize = pageSize; }, }, }; </script> ``` 在上面的代码中，我们定义了一个 Table 组件，并通过 dataSource 属性传递了一个包含三条数据的数组。通过设置 pagination 属性的 showSizeChanger 为 false，禁用了 pageSize 切换器。同时，设置了 defaultPageSize 属性为 10，表示默认每页显示 10 条数据。在页面上，我们定义了三个按钮，分别对应每页显示 10、20、50 条数据。在点击按钮时，调用 changePageSize 方法，修改 pagination.defaultPageSize，从而实现每页显示数据条数的切换。