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

news2024/11/25 15:40:02

一、问题

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

                <Table
                dataSource={data.list}
                rowSelection={{
                  selectedRowKeys: selectedIdsInSearchTab,
                  onChange: this.onSelectChange,
                }} // 表格是否可复选,加 type: 'radio',是单选,去掉是多选
                columns={this.getColumns()}
                rowKey={record => record.id}
                pagination={false}
                loading={loading}
                size="middle"
                bordered
                scroll={{ 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.coloradmin.cn/o/1048526.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

NFT Insider#109:The Sandbox推出了首个足球小将 NFT 作品集,YGG Web3 游戏峰会即将开启!

引言&#xff1a;NFT Insider由NFT收藏组织WHALE Members、BeepCrypto联合出品&#xff0c;浓缩每周NFT新闻&#xff0c;为大家带来关于NFT最全面、最新鲜、最有价值的讯息。每期周报将从NFT市场数据&#xff0c;艺术新闻类&#xff0c;游戏新闻类&#xff0c;虚拟世界类&#…

情满中秋᛫欢度国庆 | 联诚发与你共度佳节!

转眼九月份又走到尽头 国庆和中秋正好撞了个满怀 随风飘扬的国旗与满街飘香的月饼 国泰民安与阖家团圆 这是大家与小家最美好的祈愿 当中秋遇上国庆&#xff0c;当团圆遇上国诞 双节来临之际 为庆祝传统佳节与祖国生日 也为感谢联诚发每位员工的辛勤付出 9月28日下午 …

国庆旅游带什么东西?国庆数码必备数码清单请收好

出游度假少不了的是啥&#xff1f;当然是拍美美的照片记录快乐啦&#xff01;So&#xff0c;今天就特意给大家准备了一期数码产品&#xff0c;出游必备&#xff0c;而且还可以作为出片道具。 【umelody 轻律 U1头戴式耳机】——269元 产品外观定位时下流行之‘Retro Futurism’…

一朵华为云,如何做好百模千态?

点击关注 文丨刘雨琦、郝鑫 2005年华为提出网络时代的“All IP”&#xff0c;2011年提出数字化时代的“All Cloud”&#xff0c;2023年提出智能时代的“All Intelligence”。 截至目前&#xff0c;华为的战略升级经历了三个阶段。 步入智能化&#xff0c;需要迎接的困难依然…

异地寄件云打印教程

对于部分企业来说&#xff0c;出于各种原因&#xff0c;员工不得不进行“异地办公”&#xff0c;在这种情况下&#xff0c;因公寄件就是一件麻烦事儿&#xff0c;为什么这么说呢&#xff1f; 比方说一些电商企业&#xff0c;由于成本把控的问题&#xff0c;仓库会建在离货源地更…

降本提效促成交,抖音电商商品卡实时免佣这么做就对了!

抖音电商深耕全域生意&#xff0c;于今年3月推出商品卡免佣政策助力商家开辟生意新阵地&#xff0c;运行半年多&#xff0c;已有超百万商家收获可观免佣收益。9月1日起&#xff0c;商品卡免佣政策升级为实时免佣&#xff0c;佣金实时返还、金额清楚&#xff0c;再次激发商家经营…

混淆技术研究-混淆技术-源码分析(2)

简介 OLLVM(Obfuscator-LLVM)是基于LLVM(Low Level Virtual Machine)框架的一种代码混淆器。它主要用于对C/C++和汇编语言程序进行混淆,以增加代码的复杂性,提高代码的安全性和抵抗逆向工程的能力。 IR(Intermediate Representation)是指中间表示,是编译器在将源代码…

FastestDet---原理介绍

1.测试指标 2.算法定位 FastestDet是设计用来接替yolo-fastest系列算法,相比于业界已有的轻量级目标检测算法如yolov5n, yolox-nano, nanoDet, pp-yolo-tiny, FastestDet和这些算法根本不是一个量级,FastestDet无论在速度还是参数量上,都是要小好几个数量级的,但是精度自然…

为什么埃隆·马斯克说Rust是AGI的语言?

为什么埃隆马斯克说Rust是AGI的语言&#xff1f; 大喵点评&#xff1a;本文作者的观点不代表我的观点&#xff0c;另有人视频里指出Mojo比Python快 35000倍的测评有失偏颇。请见&#x1f447;视频。 但&#xff0c;本篇的价值在于 以及为什么WasmEdge是AGI采用Rust的关键路径…

HALCON支持GPU加速的算子有哪些?

参考例程get_operator_info。 get_opencl_operators这里可以查看到所有支持gpu加速的算子。 支持的算子列表&#xff1a; crop_rectangle1&#xff0c;deviation_image&#xff0c;mean_image&#xff0c;points_harris&#xff0c;gray_opening_shape&#xff0c; gray_dilat…

加速企业AI实施:成功策略和效率方法

文章目录 写在前面面临的挑战MlOps简介好书推荐 写作末尾 写在前面 作为计算机科学领域的一个关键分支&#xff0c;机器学习在当今人工智能领域中占据着至关重要的地位&#xff0c;广受瞩目。机器学习通过深入分析大规模数据并总结其中的规律&#xff0c;为我们提供了解决许多…

LeetCode算法题---第3天

注:大佬解答来自LeetCode官方题解 121.买卖股票的最佳时期 1.题目 2.个人解答 function maxProfit(prices) {//更新最低价格和最大利润let minPrice prices[0];let maxProfit 0;for (let i 1; i < prices.length; i) {// 如果当前价格比最低价格还低&#xff0c;更新最…

基于SpringBoot的校园资料分享平台

目录 前言 一、技术栈 二、系统功能介绍 学生信息管理 学生统计管理 资料分享管理 公告资讯管理 首页资料分享 资料分享评论 我的收藏 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息互联网购物的飞速发展&#xff0c;国内放开了自媒体的政策…

图像处理与计算机视觉--第五章-图像分割-霍夫变换

文章目录 1.霍夫变换(Hough Transform)原理介绍2.霍夫变换(Hough Transform)算法流程3.霍夫变换(Hough Transform)算法代码4.霍夫变换(Hough Transform)算法效果 1.霍夫变换(Hough Transform)原理介绍 Hough Transform是一种常用的计算机视觉图形检验方法&#xff0c;霍夫变换一…

【再识C进阶3(下)】详细地认识字符分类函数,字符转换函数和内存函数

前言 &#x1f493;作者简介&#xff1a; 加油&#xff0c;旭杏&#xff0c;目前大二&#xff0c;正在学习C&#xff0c;数据结构等&#x1f440; &#x1f493;作者主页&#xff1a;加油&#xff0c;旭杏的主页&#x1f440; ⏩本文收录在&#xff1a;再识C进阶的专栏&#x1…

明年亮相香港与新加坡!Polkadot 区块链学院欢迎 Web3 革新者报名

熊市是建设的绝佳时机。继剑桥大学、布宜诺斯艾利斯大学、加州大学伯克利分校之后&#xff0c;Polkadot 区块链学院&#xff08;PBA&#xff09;宣布明年将在亚洲开设两站课程&#xff01;你是否准备好全身心投入到 Web3 的世界&#xff0c;突破边界束缚&#xff0c;开拓创新&a…

Python如何优雅地可视化目标检测框

读入图像 img_name ./pikachu.jpg img cv2.imread(img_name) box [ 140, 16,468,390, "pikachu"] box_color (255,0,255) cv2.rectangle(img, (box[0], box[1]), (box[2], box[3]), colorbox_color, thickness2)标签美化 接下来我们来给矩形框添加标签,我们…

Win10电脑任务栏没有蓝牙图标的简单解决方法

Win10电脑任务栏没有蓝牙图标怎么办&#xff1f;在Win10电脑中&#xff0c;用户有时候会发现任务栏上没有蓝牙图标了&#xff0c;这样就无法通过蓝牙图标快速打开蓝牙服务了。下面小编给大家介绍最简单的解决方法&#xff0c;帮助大家找回任务栏上面的蓝牙图标吧。 问题原因 反…

一致性 Hash 算法

是什么&#xff1a; 一致性 hash&#xff0c;是一种比较特殊的 hash 算法&#xff0c;它的核心思想是解决在分布式环境下&#xff0c; hash 表中可能存在的动态扩容和缩容的问题。 为什么会出现一致性Hash 一般情况下&#xff0c;我们会使用 hash 表的方式以 key-value 的方式来…

一个月软考高项(信息系统项目管理师)冲刺攻略

2023下半年软考信息系统项目管理师&#xff08;高项&#xff09;&#xff0c;离11月4号的考试&#xff0c;只有1个多月了&#xff0c;啃书是来不及了&#xff0c;要抓重点看了 信息系统项目管理师考试介绍&#xff1a; 考试时间&#xff1a;一年考两次&#xff0c;上半年的5月…