React antd Table点击下一页后selectedRows丢失之前页选择内容的问题

一、问题

使用了React antd 的<Table>标签,是这样记录选中的行id与行内容的:

                <TabledataSource={data.list}rowSelection={{selectedRowKeys: selectedIdsInSearchTab,onChange: this.onSelectChange,}} // 表格是否可复选,加 type: 'radio',是单选,去掉是多选columns={this.getColumns()}rowKey={record => record.id}pagination={false}loading={loading}size="middle"borderedscroll={{ x: 1100 }}/>

其中有this.onSelectChange方法,内容如下:

  // 复选框选中后的方法onSelectChange = (selectedIds, selectedRows) => {const { dispatch } = this.props;dispatch({type: 'SelectTableJS/updateSelectedIdsInSearchTab',selectedIds,selectedRows,});};

然后SelectTableJS.js中,有变量保存了下选中id与选中行数据:

export default {namespace: 'SelectTableJS',state: {selectedIdsInSearchTab:[],selectedRowsInSearchTab:[],
},
=====================================
reducers: {updateSelectedIdsInSearchTab(state, action) {return {...state,selectedIdsInSearchTab: action.selectedIds || state.selectedIds,selectedRowsInSearchTab: action.selectedRows || state.selectedRows,};},},

后续其它页面使用时,就可以获取到这2个变量:


@connect(({ SelectTableJS }) => ({SelectTableJS, 
}))
===========================render() {const {SelectTableJS: { selectedIdsInSearchTab,selectedRowsInSearchTab },} = this.props;

但是使用时,会发现,如果在表格的多页中都选择了某些行,最后记录选中id的数组selectedIdsInSearchTab是正确的,但是记录选中行内容的数组selectedRowsInSearchTab 是不正确的,只有表格当前页选中的行,其它页选中行的内容丢失了。

二、排查过程

排查发现,这个是框架的bug,没办法修改。
参考文章:
https://blog.csdn.net/yoyoyo8888/article/details/132324571

三、解决方法

因为确实需要多页选中行的数据,只有id不够,所以给表格加了2个按钮:
在这里插入图片描述

1.这样用户可以先选择当前页数据,然后点击添加按钮,就把当前页选中行添加到自己准备的数组中。

2.用户翻页,再次选择数据,再次点击添加按钮,把当前页选中行添加到自己准备的数组中。

3.注意数组需要去重,不能重复选择。

4.注意数组判空。

5.如果选错,只能先点清空按钮,然后重新选择。

四、备注

1.遗留问题是,如果用户多页都选择了数据,然后点击添加按钮,那还是只会把当前页数据添加到自己准备的数组中,之前页选择的不会添加。

2.后期可以优化,因为id是全的,所以可以通过id查询后台接口、获取到每行的内容、添加到数组中?(不如优化成只需要id就足够,不要每行其它内容更好)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/120355.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在linux下预览markdown的方法,转换成html和pdf

背景 markdown是一种便于编写和版本控制的格式&#xff0c;但却不便于预览——特别是包含表格等复杂内容时&#xff0c;单纯的语法高亮是远远不够的——这样就不能边预览边调整内容&#xff0c;需要找到一种预览方法。 思路 linux下有个工具&#xff0c;叫pandoc&#xff0c…

Direct3D模板缓存

模板缓存是一个用于获得某种特效的离屏缓存&#xff0c;模板缓存的分辨率与后台缓存和深度缓存的分辨率完全相同&#xff0c;所以像素也是一一对应的&#xff0c;模板缓存允许我们动态的&#xff0c;有针对性的决定是否将某个像素写入后台缓存中。 例如实现镜面效果时&#xf…

常用中间件-OAuth2

1. 微服务权限校验Session共享 1.1 微服务权限校验 实现2号方案。使用Redis作为Session统一存储。 首先配置一下Nacos&#xff0c;参考https://blog.csdn.net/weixin_43917045/article/details/132852850 然后为每个服务添加验证机制&#xff0c;先导入依赖 <!-- SpringS…

打开深度学习的锁:(2)单隐藏层的神经网络

打开深度学习的锁 导言PS&#xff1a;神经网络的训练过程一、数据集和包的说明1.1准备文件1.2 需要导入的包 二、构建神经网络的架构三、初始化函数四、激活函数4.1 tanh&#xff08;双曲正切函数&#xff09;函数 五&#xff0c;前向传播六、损失函数七、后向传播八、梯度下降…

修改vscode底部栏背景和字体颜色

修改vscode底部栏背景和字体颜色 如图&#xff1a; 首先打开齿轮&#xff0c;打开设置搜索workbench.colorCustomizations,然后点击编辑setting.json修改setting.json内内容 "workbench.colorCustomizations": {"statusBar.foreground": "#FFFFFF…

AI类APP能做什么

AI类APP可以实现多种功能&#xff0c;涵盖了各种领域和用途。以下是一些常见的AI类APP示例以及它们主要实现的功能&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.语音助手&#xff08;Voice Assis…

微信小游戏从零到上线系列文章整理,建议收藏

引言 本系列是《从零开始开发贪吃蛇小游戏到上线系列》&#xff0c;欢迎大家关注分享收藏订阅。 大家中秋快乐&#xff0c;我是亿元程序员&#xff0c;一位有着8年游戏行业经验的主程。前面笔者给大家讲解了微信小游戏如何从零到上线的流程。可能很多小伙伴都还没有看到。 本…

Nginx负载均衡详解

一、负载均衡介绍 1、负载均衡的定义 单体服务器解决不了并发量大的请求&#xff0c;所以&#xff0c;我们可以横向增加服务器的数量&#xff08;集群&#xff09;&#xff0c;然后将请求分发到各个服务器上&#xff0c;将原先请求集中到单个服务器上的情况改为将请求分发到多…

Idea上传项目到gitlab并创建使用分支

Idea上传项目到gitlab并创建使用分支 1 配置git 在idea的setting中&#xff0c;找到git&#xff0c;配置好git的位置&#xff0c;点击Test按钮显示出git版本号&#xff0c;则说明配置成功。 2 项目中引入git Idea通过VCS&#xff0c;选择Create Git Repository 在弹出的对话框…

探索ClickHouse——连接Kafka和Clickhouse

安装Kafka 新增用户 sudo adduser kafka sudo adduser kafka sudo su -l kafka安装JDK sudo apt-get install openjdk-8-jre下载解压kafka 可以从https://downloads.apache.org/kafka/下找到希望安装的版本。需要注意的是&#xff0c;不要下载路径包含src的包&#xff0c;否…

stl格式-3D三角形

文章目录 什么是stl文件?格式首选stl的语法1.这是一个stl格式的文件:(ASCII码)2.下面先举个例子(难度略微提示)补充:关于\<\<我试了一下:这个法线你随便写好像也没问题\>> 3.来个立方体4.最后再写一个由三个直角形组成的立方体(直棱锥)5.amend 修正(右手定则,法线…

redis介绍

一、简介 Redis 与其他 key - value 缓存产品有以下三个特点&#xff1a; Redis支持数据的持久化&#xff0c;可以将内存中的数据保存在磁盘中&#xff0c;重启的时候可以再次加载进行使用。 Redis不仅仅支持简单的key-value类型的数据&#xff0c;同时还提供list&#xff0c;…