antd的table组件中渲染columns的时候无法正确获取到父组件的state问题——个人记录

已于 2022-02-18 09:34:41 修改
阅读量2.3k 收藏 7
点赞数 4
分类专栏： 前端 antd组件 文章标签： react.js 前端 ant
于 2022-01-24 14:26:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44634727/article/details/122666435
版权

问题描述

首先我使用的是函数式组件（因为封装的原因 我将以下代码都写在了父组件函数里面）

然后在父组件中我定义了一个state 用于记录某个作用的id
在这里插入图片描述
初始值是333 （这333后面有用）
但是在显示组件的时候 我利用useEffect函数 发起请求 获取后端最新的deptid 然后使用setDeptid对deptid进行从新的赋值
在这里插入图片描述
当重新赋值deptid之前 我是已经渲染 table的columns
下图是columns中的某一个 操作列
在这里插入图片描述
如上图 删除按钮是一个deleteItem的函数
在这里插入图片描述
如图所示该函数执行会输出了父组件的state但是该输出却是333 并不是最新的数据

原因分析

究其原因发现原来 是我掉进了闭包陷阱当中
在渲染table的时候 我将之前的deptid放到了deleteItem中 由此形成了一个闭包 在内存中将之前的333缓存了起来 然后当你再次点击按钮触发deleteItem函数的时候 该值重新从缓存中拿出来 那么显示的就是之前的值，而在类组件中是不会存在这种问题的

解决方案

如上图所示 解决方案是在父组件中使用一个useRef钩子 来保存最新的数据 需要用的时候 直接console.log(countRef.current)即可
在这里插入图片描述

参考文献

添加链接描述

小何程序员
关注
专栏目录
React 高阶组件应用（一） 改善 antd Table组件的渲染效率
追逐丶的博客
07-22 3966
一、前言 对于react 高阶组件。大家基本只知道定义和用法，在实际开发中，使用的可能并不多。项目组下来一个任务，重写某个由Antd Table渲染为主要功能的模块，这里发现一些问题，Antd Table在渲染时，即使没有改变Table的props，只是改变包裹Table的组件，Table组件也会重新渲染。 二、问题产生 import { Table} from 'antd'; class TestRoot extends Component { change() { this.setState(
antd 设置表头属性_React —— antd Table组件的使用
weixin_39880666的博客
12-21 3188
今天刚刚运用antd做了个分页，根据官网上的指导和一些自己的摸索，将其完成，有些代码编写的还是比较繁琐，没有做简化。antd官网讲的还是比较详细的，有案例，本例在其基础上扩展了一下功能，现将其按照例子的方式记录下来，以供以后参考。先将显示出来的效果放出来(注：本次案例是点击一次页码请求一页数据)：编码过程大体需要以下几步：1.初始化必要属性，如数据 data，数据条数 count;2.设置tabl...
Antd Table组件，state改变，但是render并不会重新渲染
坚强的泡沫的博客
05-09 859
Antd Table组件，state改变，但是render并不会重新渲染
antd——table表格动态列——展示日期的列+内容——技能提升
最新发布
yehaocheng520的博客
08-29 506
antd——table表格动态列——展示日期的列+内容——技能提升
解决antd表格行操作获取不到数据的问题
sinat_39648402的博客
11-06 5090
<Table columns={columns1} dataSource={this.state.dclData} onRow = {(record) => { return { onClick: () => { console.log(record);//这里是点击行的数据，可以把需要的数据存入...
antd table column 列表渲染
datouniao1的博客
10-30 4569
在上面的table中，使用了两处的渲染，第一个是是否，第二个是两个按钮 我们选来看第二个，两个按钮的渲染，这个里面没有条件 { title: '操作', dataIndex: 'rowguid', key: 'rowguid', render: (text, record) => ( <Space> <Button type="primary" size="small" onClick= ...
antd table 渲染未完成离开页面，重新回去表格渲染错误
Cooky的博客
10-27 999
1
【react hook】在react hook组件中，使用Antd Table组件，columns数据异步获取，list数据更新但没有rerender解决办法
hzxOnlineOk的博客
11-10 891
其中，a属性是一个数组，这意味着无法在第二个useEffect中直接指定datasource作为依赖项，因为它是浅比较的，需要使用JSON.stringify(datasource)作为依赖，检测字符串长度是否发现变化。并且因为以上的案例，我们发现数据虽然打印出来更新了，但是却没有触发rerender，导致columns的数据仍旧是上一次的，这时，我们需要再增加一个状态，用来提示更新。
封装react antd的表格table组件
08-12 2310
封装组件是为了能在开发过程中高度复用功能和样式相似的组件，以便我们只关注于业务逻辑层的处理，提高开发效率，提高逼格，降低代码重复率，降低劳动时间，减少加班的可能。 本次组件的封装采用了函数式组件即无状态组件的方式来提高页面渲染性能，由于无状态组件在数据变更后不会主动触发页面的重新渲染，所以本次的封装也用到了React Hooks。下面简要介绍一下函数式组件和React Hooks。 函数式组件是被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会再有组件实例化的过程，无实例化过
react+antd页面首次加载渲染默认时间并传入父组件
那么那么晴天依旧、
12-03 1086
react 的 默认时间的渲染和请求
react antd的Table组件实现鼠标移入某一行显示该行操作
谷长江的博客
09-30 5555
实现思路（基于react hook 实现） 定义一个state 值，记录当前鼠标移入行的索引 操作列使用 colume 的 render 属性自定义渲染内容，但是要给列宽，否则内容的显示隐藏会导致表格抖动，渲染内容通过对比本行索引（index）与 state 记录的索引，动态设置内容className 通过Table 的 onRow 属性，通过回调方法得到当前鼠标移入行的索引，并更新state 别墨迹，快上代码吧 import React, { memo, useCallback, useState }
【原创】antdesign表格组件column的API里render方法详解
yiran1919的博客
04-11 1121
第一次接触antdesign，对于table组件还不是很了解，那就啃官方文档吧。这两天做项目，有一个后台的接口，返回的数据为数字，但是前台要展示它的中文值。在column里有个render方法，那就用它试试。如下图，原始代码及前台展示。
ant design table 可编辑值，当获取值之后，select值刷新不到的问题，以及设置单个单元格禁用或者可用
longmushasha的博客
06-19 1468
一“”设置单个单元格禁用或者可用： getFieldDecorator 此方法的rule没有设置disabled的规则，所以对单个设置禁用似乎有点无能为力，他的具体的API： 具体 ：https://blog.csdn.net/XUAN_1995/article/details/84582465 属性 说明 类型 默认值 getValueFromEvent 指定如何从事件中获取值，可以把 onChange 的参数（如 event）转化为控件的值 function(…args) initialValue 子
[React]关于useEffect初次渲染拿不到值的问题
qq_41786057的博客
07-21 1001
所以，当我点击时，页面会去获取此时数据，然后，然后，然后，我的useEffect执行辣！其实到这里，问题点已经浮现出来了，注意我的useEffect函数，嗯，是的，是componentDidMount形式的写法，在页面挂载完毕后再去执行里面的逻辑操作，而这里面最重要的函数就是getCartList，这是获取购物车列表的方法，也是更新页面的方法。所以每次页面显示的都是上一次的数据，而此时的数据其实已经更新了，所以当下一次更新页面时，拿取的数据是上一次更新结束的数据。就是这样，形成了一个延迟的画面，😂。
antd table dataIndex拿不到对象里属性的值
weixin_55014951的博客
03-27 2290
找这个问题的八成是这样写的 跟我一样请给我点个赞,哈哈哈 看官方文档是怎么说的 所以正确的写法 事实证明要多看文档
【antd】解决Table组件改变dataSource没有重新渲染问题记录
mytac的博客
06-30 9663
维护一个state，类型为tree结构，Table组件中dataSource要绑定这个树的cur指针指向的某个节点下的子节点数组。当我准备删除某个节点时，却发现视图上没有变化。我最开始怀疑是react没有检测到state变化，所以没有rerender，自己自制了forceupdate方法，见我另一篇博文：《函数组件强制渲染 模仿forceUpdate》，使用forceUpdate确实能强制令视图更新。且，我在视图层打印dataSource绑定的数据也能发现，确实是更新，数据有变化，但是Table组件就是没有
从一个表格render方法问题看React函数组件的更新
qq_45279180的博客
12-02 1361
最近在开发中碰到了一个现象觉得很有典型能作为例子所以给大家分享一下，从这个现象我们能很清楚的看到函数组件的更新的特点，以及我们应该如何去理解和拥抱函数组件。
ant design table render问题
qq_36384745的博客
04-18 1779
ant-design table render问题，render+switch语句用法，render+switch Unreachable code报错
antd Protable高级表格 缓存列设置
jp2021的博客
05-22 1235
以下文章实现前端缓存列展示功能：自定义表格列展示顺序、是否展示、是否固定。高级表格的Protable.columnsState可以很好的帮助我们。
在react和antd下，怎么使用table组件的summary属性根据table的column展示由另一个接口返回的汇总数据，并将summary固定在头部
06-09
在React和Antd下使用Table组件的summary属性可以通过自定义Table组件的render方法来实现。 首先，你需要从接口中获取到汇总数据，并将其存储在组件的state中。 然后，在Table组件中，你需要设置summary属性为一个函数，该函数接收tableData和columns作为参数，然后返回一个JSX元素，用于显示汇总数据。 最后，你可以使用Antd的Sticky组件来将summary固定在表头。 以下是一个示例代码： ```jsx import React, { useState, useEffect } from 'react'; import { Table, Sticky } from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Age', dataIndex: 'age', }, { title: 'Address', dataIndex: 'address', }, ]; const MyTable = () => { const [tableData, setTableData] = useState([]); const [summaryData, setSummaryData] = useState({}); useEffect(() => { // 从接口中获取汇总数据，并将其存储在state中 fetchData(); }, []); const fetchData = async () => { const response = await fetch('api/summary'); const data = await response.json(); setSummaryData(data); }; const renderSummary = (data, columns) => { // 根据columns和汇总数据生成JSX元素 return ( <tr> {columns.map((column, index) => ( <td key={index}>{data[column.dataIndex]}</td> ))} </tr> ); }; return ( <> <Sticky> <Table columns={columns} dataSource={tableData} summary={renderSummary(summaryData, columns)} /> </Sticky> </> ); }; export default MyTable; ``` 在上面的代码中，我们通过useState和useEffect来获取汇总数据，并且使用renderSummary函数来渲染汇总数据。最后，我们将Table组件包裹在Sticky组件中，以将summary固定在表头。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值