Antd table组件用rowSelection时报shiftKey undefined

在项目中同时使用antd和antd-mobile时,由于两者都依赖rc-checkbox,导致低版本rc-checkbox被安装,进而引发在antdTable中无法选中复选框的问题。通过检查webpack配置,发现模块解析路径设置导致加载了错误版本的rc-checkbox。将特定的node_modules路径注释掉后,修复了问题。这表明webpack的模块解析路径设置对依赖版本冲突有直接影响。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题

在使用antd Table的rowSelection时,无法选中,报如下错误:
在这里插入图片描述
但是在codesandbox中,点击复选框,并不会报错
在这里插入图片描述

定位

https://juejin.cn/post/6844904138057187336

问题描述,和当前实际遇到的类似,项目中同时有PC端和移动端的,package.json中有antd和antd-mobile依赖,接下来就差验证了,直接去掉antd-mobile依赖,重新yarn安装,因为,PC端和移动webpack分开打包,所以本地直接yarn dev:pc只启动PC端,再次操作复选框,可以正常操作;

解决

项目同时使用了 antd 和 ant-mobile,而且 antd 和 ant-mobile 都依赖 rc-checkbox,使用 yarn 安装的时候低版本的 rc-checkbox 被装在了 node_modules 根目录,而我在 webpack 中设置了 modules: [path.resolve(‘Assets/src’), path.resolve(‘node_modules’)] 造成 webpack 只从根目录下的 node_modules 读取依赖,打包了错误的版本

问题大概找到了,去看自己项目webpack的打包配置

 modules: [
     path.resolve(__dirname, "../src"),
     path.resolve(__dirname, "../node_modules"),
     "node_modules",
   ]

注释掉path.resolve(__dirname, "../node_modules"),问题解决了,但是为什么?

探究

详情请查阅下一篇文章:
https://blog.youkuaiyun.com/gkf6104/article/details/118972578

### 如何刷新 antd Table 组件 为了确保 `antd` 的 `Table` 组件能够正确地刷新并重新加载数据,可以采取以下几种方式: #### 方法一:通过父组件状态管理 当需要刷新表格中的数据时,可以通过改变父组件状态来触发子组件的重新渲染。具体来说,在获取新数据之后更新父组件中存储的数据源。 ```javascript import React, { useState, useEffect } from 'react'; import { Table } from 'antd'; function MyComponent(props) { const [dataSource, setDataSource] = useState([]); useEffect(() => { fetchData(); }, []); function fetchData() { // 模拟异步请求获取最新数据 setTimeout(() => { let newData = [...]; // 新的数据集 setDataSource(newData); }, 1000); } return ( <div> <button onClick={() => fetchData()}> Refresh Data </button> <Table dataSource={dataSource} columns={props.columns} /> </div> ); } export default MyComponent; ``` 这种方法利用了 React 的生命周期特性以及钩子函数 `useEffect` 和 `useState` 来控制组件的行为[^1]。 #### 方法二:使用 `key` 属性强制重载 如果希望更彻底地刷新整个表单而不仅仅是其内容,则可以在每次想要刷新时更改传递给 `<Table>` 组件的唯一键 (`key`) 值。这会使得 React 将此视为一个新的实例而不是现有实例的一部分,从而导致完全重建 DOM 节点。 ```jsx <Table key={`table-${Math.random()}`} ... /> ``` 不过需要注意的是,这种方式虽然有效但也可能导致性能问题,因此应谨慎使用[^2]。 #### 方法三:调用 `pagination.current=1` 对于带有分页功能的情况,有时只需将当前页面设置回第一页即可达到刷新的效果。这是因为很多情况下首次加载的就是最新的记录集合。 ```javascript const handleRefresh = () => { paginationRef.current.pagination = {current: 1}; tableInstance.reload(); // 或者其他用于触发数据加载的方式 }; ``` 这里假设有一个指向实际使用的 Pagination 对象的引用 (即 `paginationRef`) ,并通过它调整属性值;同时还需要配合相应的事件处理逻辑以启动新的 API 请求过程[^3]. 以上三种方案都可以帮助实现在特定条件下对 Ant Design 表格控件内所含信息的有效更新与替换工作。选择哪种取决于具体的业务需求和技术栈特点等因素考虑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值