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

最新推荐文章于 2024-01-16 16:34:41 发布
最新推荐文章于 2024-01-16 16:34:41 发布
阅读量3.3k 收藏 4
点赞数 6
文章标签： react javascript es6 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/spray_wave/article/details/110492756
版权

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

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

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

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

一朵小浪花儿
关注
antd嵌套表格遇到的小问题
lanseguhui的博客
05-25 1186
antd的api中嵌套表格的数据在expandedRowRender方法中，但是使用的时候不能在这个方法中进行ajax请求，expandedRowRender 实际上是在 Table 组件的 render 方法中调用的，React render 中用 ajax 会造成重复调用的问题，ajax -> setState -> render -> ajax-> setState -> render，循环往复。在expandedRowRender中进行render返回标签，在onExp
react-antd项目，一个多tab页面，共用一个title相同的table表格，并且在切换tab时实现数据更新
BigFamer的博客
08-12 5834
最近因为项目要求，开始学习并且使用React和Ant Design框架。在前端开发过程中，遇到这样一个页面：有多个tab，每个tab下都是一个table表格来进行数据展示。但，每个table的title都是一样的，如何进行表格的渲染和对应数据的展示就值得开发人员考虑。下面，我们一起来瞧瞧。...
【ant-design】 a-table的rowKey出现重复的问题
piano_diano的博客
01-29 4262
背景 今天在使用ant-design的a-table发生了一件诡异的事情，a-table可以设置数据选中的样式（多选或者单选），我设置为单选的时候，偶然间发现了3条数据竟然是连在一起选中的 然后我右键检查标签，发现他们三条数据的row-key是一样的 接着我看<a-table>中是怎么设置row-key的 问题就在这，我的数据列中并没有id这个字段，我猜测这个是<a-table>自生成的（不管，先口胡一下。。） 解决 给r...
React使用antd Table组件多选 切换页同样选中
cdy_1的博客
01-16 1031
就是本来选中了第一页的数据，再切换到第二页选择时，第一页选中的数据就没了，相信大家会经常遇到这个问题。要解决这个问题就只能利用table组件所提供的另外两个事件了，onSelect和onSelectAll，用onSelect这个来实现单行的选中和取消选中，onSelectAll实现整页的选中和取消选中。这个问题的原因是因为我们正常列表都是分页请求数据，在切换到第二页时，其实第一页的数据就已经没有了，会重新请求第二页的数据；当点击选中时就只有第二页数据了，所以选中的也只会是当前页的数据，其他页的就丢了。
element中表格，表单等等重置之后依然显示上一次的数据
CHENC0518的博客
03-15 985
1.造成这个问题的原因就是因为深拷贝和浅拷贝的问题，只需要对赋值的数据进行深拷贝即可。
Ant Design of Vue 表格数据 重复渲染
qq_42957667的博客
08-26 2541
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" // 展开图标触发
antd table分页_react antd 分页，切换筛选条件之后分页组件没有默认第一页
weixin_39956443的博客
12-22 2760
每次切换筛选条件之后，分页组件当前页还停留在上次页面的当前页，没有默认切换到当前筛选条件的第一页，table数据渲染的是当前筛选条件的第一页，就是分页组件不对，请各位大神不吝赐教//点击分页handleTableChange = (page,pageSize) => {const { dispatch ,eventId} = this.props;const { pagination, Qu...
antd table 多选 数据缓存问题
黑山老妖的小站
11-07 2366
业务需求：可以勾选当前页数据、下一页数据进行批量操作。 其实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`的固定...
layuiAdmin+springboot项目标签页切换会出现上一次标签页内容
qq_42257131的博客
04-14 404
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 8969
项目场景： 知识产权模块展示表格数据 问题描述 控制台给出警告 原因分析： 未按照组件要求添加key 属性作为唯一的标识。 解决方案： 方法1：:rowKey=“record=>record.number” <!-- number为表格数据data中的一个属性 --> <a-table ref="table" size="middle" :rowKey="record=>record.number" :colu
antd中Transfer穿梭框数据显示问题
Femi的博客欢迎大家
07-08 4201
新接手的react项目中，有需求要在结构中渲染多个穿梭框，实际表现是框出来了，只有第一个穿梭框中的数据正常显示，如下图 数据都是有的，就是不显示出来，勾选上就会展示，或者不使用map循环渲染的方式直接多个列出来也会正常展示。 原因：Transfer 默认使用了 react-lazy-load 优化性能，可以通过设置 lazy={false} 关闭懒加载。 ...
antd中树形表格tab切换时出现表格数据不清空的情况
RyleeLouth的博客
02-24 1425
大家肯定会有这样的需求，表格需要进行数据切换，antd很强大，当你的数据是树形结构时，会自动生成树形表格，就像下面这样（图为官网图片） 但是你会发现，当你需要切换表格数据的时候，会出现表格数据不清空的情况，上一个tab的数据会掺杂在下一个tab中，这个问题让我非常苦恼，这是因为antd在进行切换表格数据的时候没有清空数据，所以出现了这样的情况，解决方案：在切换数据的函数里面加上这样一句话来清空数...
antd中的嵌套表格使用
bruce_zhen的博客
10-11 5215
开发antd的嵌套表格功能， 因为对antd不熟练，一顿乱操作，一天下去了， 终于好了，说回正题，要实现一个嵌套表格功能，被嵌套的表格内容随着所在的主表格动态显示，说一下遇到的几个问题， 1，dataSource={data}，data必须为数组，形如[{key:value}]，所以先把要展示的数据存放在对象{ }中，再把数据存放在数组中，最后绑定dataSource； 2，dataSource中...
【antd】Table的rowKey设置后仍warning警告key重复的原因
hzxOnlineOk的博客
12-28 892
ant Table的rowKey设置后仍warning警告key重复的原因。
解决antd vue的 Table组件selectedRows翻页后不保留上一页已选中数据
weixin_44090753的博客
07-01 1829
解决antd vue的 Table组件selectedRows翻页后不保留上一页已选中数据
antd Table表格分页显示时表格显示异常
wdm891026的博客
01-30 6262
现象：一个表格，数据有37条，每页显示10条，第1页显示正常； 当我点击第二页时，也正常；点击第三页，数据变多，不止一页10条，第四页也是更多，返回第一页，第一页也有几十条。。。 排查： 第一步：查看网络请求，没问题 第一页请求{pageNum: 1, pageSize: 10},返回数据 10条； 第二页请求{pageNum: 2, pageSize: 10},返回数据 10条； 第三...
使用Ant Design的Table表格最后一列固定（fixed）出现重复
热门推荐
04-12 1万+
操作列右侧固定。在列很少情况下出现重复问题 对于没有bordered边框解决方案 { title: '编号', dataIndex: 'id', sorter: true, width: 100, align: 'left', render: text => text || '-' }...
antd Table表格翻页后，上一页选择的selectedRows数据能保存吗
最新发布
09-11
antd是一个流行的React组件库，提供了多种UI组件，其中包括Table表格组件。使用antd Table组件时，可以通过其提供的selectedRows属性来控制表格中被选中的行。如果你在使用分页功能时希望翻页后还能保持之前选中的行不变，可以通过一些方法来实现这一需求。 要在翻页时保持selectedRows数据，你可以采用以下几种策略： 1. 将selectedRows存储在父组件的状态中，确保在翻页时不会因为组件的重渲染而丢失这些数据。你可以在父组件中维护一个状态来记录当前选中的行。 2. 使用Table组件的onRowSelect回调函数，在用户选择或取消选择某行时，更新父组件的状态。确保在分页动作发生时，将当前的selectedRows数据传递给分页组件。 3. 在翻页时，将当前的selectedRows数据通过分页组件的某个参数传递给它，然后在分页动作完成后，重新从分页组件获取这些数据，并更新到Table组件的selectedRows属性中。 下面是一个简单的示例代码片段，说明了如何实现上述逻辑： ```jsx import React, { useState } from 'react'; import { Table } from 'antd'; const MyComponent = () => { const [selectedRows, setSelectedRows] = useState([]); const [currentPage, setCurrentPage] = useState(1); const handleRowSelect = (selectedRowKeys, selectedRows) => { setSelectedRows(selectedRows); }; const handlePageChange = (page) => { setCurrentPage(page); // 在这里，你可能需要将 selectedRows 传递给分页组件或者进行其他逻辑处理 }; const pagination = { current: currentPage, onChange: handlePageChange, }; return ( <Table rowSelection={{ selectedRowKeys: selectedRows.map(row => row.key), onSelect: handleRowSelect, }} pagination={pagination} // 其他配置项... /> ); }; ```
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值