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

news/2024/11/30 2:49:55/

一、问题

使用了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.ppmy.cn/news/1129208.html

相关文章

源码编译postgresql

没什么好研究的了&#xff0c;就试试编译Postgresql源码&#xff0c;按照网站查的资料一步步测试的&#xff0c;方便后期定制数据库时候用&#xff0c;也算是开源的大优势了&#xff0c;只要你愿意折腾&#xff0c;可以自己定制或改进一个数据库来满足特殊业务。后面研究一下他…

【owt-server】切换node和npm版本

fix : - npm v9.7.1 is known not to run on Node.js v10.21.0.npm 版本与node版本不匹配 npm v9.7.1 is known not to run on Node.js v10.21.0.root@k8s-master-2K4G:~/clash# npm init ERROR: npm v9.7.1 is known not to run on Node.js v10.21.0. This version of npm s…

面试理论篇二

关于数组篇 目录 关于数组篇数组方面 数组方面 注&#xff1a;自用 1&#xff0c;什么是数组&#xff1f; 数组是⼀种存储多个相同类型数据的数据结构&#xff0c;可以通过索引访问和修改数组中的元素。 2&#xff0c;如何声明和初始化数组&#xff1f; 声明数组&#xff0c;如…

stable diffusion模型评价框架

GhostReview:全球第一套AI绘画ckpt评测框架代码 - 知乎大家好&#xff0c;我是_GhostInShell_&#xff0c;是全球AI绘画模型网站Civitai的All Time Highest Rated (全球历史最高评价) 第二名的GhostMix的作者。在上一篇文章&#xff0c;我主要探讨自己关于ckpt的发展方向的观点…

AI创作系统ChatGPT商业运营版源码+AI绘画/支持GPT联网提问/支持Midjourney绘画+Prompt应用+支持国内AI提问模型

一、AI创作系统 SparkAi创作系统是基于国外很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&am…

Redis与分布式-主从复制

接上文 常用中间件-OAuth2 1.主从复制 启动两个redis服务器。 修改第一个服务器地址 修改第二个redis 然后分别启动 redis-server.exe redis.windows.conf) 查看当前服务器的主从状态&#xff0c;打开客户端&#xff1a;输入info replication命令来查看当前的主从状态&am…

Machine Learning(study notes)

There is no studying without going crazy Studying alwats drives us crazy 文章目录 DefineMachine LearningSupervised Learning&#xff08;监督学习&#xff09;Regression problemClassidication Unspervised LearningClustering StudyModel representation&#xff08…

Qt 信号和槽执行线程问题

Qt 信号和槽执行线程问题 1.QObject的thread() 函数 在Qt中QOject有一个thread() 的函数。这就说明&#xff0c;每一个QOject对象都有所属的线程。 注意&#xff1a; QThread也是一个QOject的子类&#xff0c;也有自己所在的线程每个QOject存在父子关系&#xff0c;存在父子…