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

最新推荐文章于 2024-08-14 10:04:16 发布

原创最新推荐文章于 2024-08-14 10:04:16 发布 · 3.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#react #javascript #es6 #vue.js

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

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

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一朵小浪花儿

关注关注

6
点赞
踩
5

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

lingliu0824的博客

09-08

6811

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

antd Table组件selectedRows翻页或重新搜索后未保留上一页已选中数据

xiasohuai的博客

12-02

1333

antd Table组件selectedRows翻页或重新搜索后未保留上一页已选中数据

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

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

piano_diano的博客

01-29

4546

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

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

CHENC0518的博客

03-15

1157

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

antd的表格有多选框时翻页记住之前选择的数据

slow097的博客

08-05

2939

antd的table表格数据有提供多选框的功能,只要设置rowSelection属性就可以选择表格的数据。但是有时候表格的数据是有分页的,分页一般是要重新请求后台数据,这样上一页的数据的选中状态就没有了。，为 true时会在数据更新之后记住之前选择的数据。（需要指定rowKey）antd提供了preserveSelectedRowKeys，类型为。...

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

cdy_1的博客

01-16

1595

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

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

spfLinux的博客

02-02

7138

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

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

最新发布

weixin_44137098的博客

08-14

619

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

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

08-30

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

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

10-15

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

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

qq_42957667的博客

08-26

2804

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

3472

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

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

qq_42257131的博客

04-14

468

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

9780

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

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

Femi的博客欢迎大家

07-08

4460

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

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

xuxiutang的博客

08-25

660

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

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

RyleeLouth的博客

02-24

1546

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

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

library_yb的博客

06-14

4871

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

antd中的嵌套表格使用

bruce_zhen的博客

10-11

5403

开发antd的嵌套表格功能，因为对antd不熟练，一顿乱操作，一天下去了，终于好了，说回正题，要实现一个嵌套表格功能，被嵌套的表格内容随着所在的主表格动态显示，说一下遇到的几个问题， 1，dataSource={data}，data必须为数组，形如[{key:value}]，所以先把要展示的数据存放在对象{ }中，再把数据存放在数组中，最后绑定dataSource； 2，dataSource中...

antd vue table 显示页大小

06-10

您可以使用 antd vue 的 Table 组件的 pageSize 属性来设置每一页显示的数据条数。以下是一个示例代码： ```html (10)">10 条/页 (20)">20 条/页 (50)">50 条/页 <a-table :columns="columns" :data-source=...