当前位置: 首页 > news >正文

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.lryc.cn/news/181804.html

相关文章:

  • 蓝牙核心规范(V5.4)11.4-LE Audio 笔记之音频模型
  • Spring Boot:利用JPA进行数据库的查删
  • 1711: 【穷举】满足条件的整数
  • 【数据结构】堆的应用-----TopK问题
  • QT之xml文件的读写
  • C语言中的异常处理机制是什么?
  • Java中的并发编程模型和常用工具类
  • 第10章 MySQL(一)
  • 英飞凌 Tricore 架构中断系统详解
  • 单例模式:饿汉式
  • 什么是视图
  • C++——list(2)
  • Django基础讲解-路由控制器和视图(Django-02)
  • 【算法题】2873. 有序三元组中的最大值 I
  • HTML5 跨屏前端框架 Amaze UI
  • EXCEL会计记账报表财务软件企业公司做账系统凭证自动生成报表
  • Can‘t pickle <class ‘__main__.Test‘>: it‘s not the same object as __main__.Test
  • 第九章 动态规划 part14 1143. 最长公共子序列 1035. 不相交的线 53. 最大子序和
  • 腾讯云服务器南京地域详细介绍、测试IP和Ping值测速
  • 理解CSS的层叠性和继承性
  • OSI体系结构和TCP/IP体系结构
  • 侯捷 C++ STL标准库和泛型编程 —— 8 适配器
  • 每日一题 416 分割等和子集(01背包)
  • U盘插上就显示让格式化是坏了吗?
  • 分布式应用程序协调服务 ZooKeeper 详解
  • Anniversary party(树形dp 基础题)
  • Junit的常用操作
  • Elasticsearch安装并使用Postman访问
  • Pytorch深度学习训练模型保存问题,找不到保存路径
  • 数据结构与算法之堆: Leetcode 23. 合并 K 个升序链表 (Typescript版)