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

已于 2022-02-18 09:34:41 修改
阅读量2.6k 收藏 7
点赞数 5
分类专栏： 前端 antd组件 文章标签： react.js 前端 ant
于 2022-01-24 14:26:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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 4111
一、前言 对于react 高阶组件。大家基本只知道定义和用法，在实际开发中，使用的可能并不多。项目组下来一个任务，重写某个由Antd Table渲染为主要功能的模块，这里发现一些问题，Antd Table在渲染时，即使没有改变Table的props，只是改变包裹Table的组件，Table组件也会重新渲染。 二、问题产生 import { Table} from 'antd'; class TestRoot extends Component { change() { this.setState(
对于 React 结合 Antd 的 Table 组件实现表格的渲染、新增、修改和删除
浮生离梦的博客
03-21 7910
一、React 结合 Antd 实现表格的渲染、新增、修改和删除 引入所需相关的组件和文件，代码如下所示： import React, { Component } from 'react' import { Card, Button, Table, Modal, message } from 'antd' import LinkButton from '../../components/linkButton/index' import { formateDate } from '../../utils/
在ant table组件中使用customRender，提示找不到数组，错误处理
qq_39400157的博客
04-01 6672
在ant table组件中使用customRender，提示找不到数组，错误处理错误代码图片解决方法方法一方法二 错误代码图片 错误原因typearr是vue中的数据，上面数组是在外层script，所以到不到typearr。 解决方法 方法一 把typearr写在< script > 里面 方法二 使用function函数 function(字段名){ return 数组[字段...
Antd中Table详解:
最新发布
m0_66986239的博客
05-06 984
title: "操作",key: "",<Button type="link" onClick={() => viewBag(data)}>查看资产包</Button>
解决antd表格行操作获取不到数据的问题
sinat_39648402的博客
11-06 5276
<Table columns={columns1} dataSource={this.state.dclData} onRow = {(record) => { return { onClick: () => { console.log(record);//这里是点击行的数据，可以把需要的数据存入...
antd table column 列表渲染
datouniao1的博客
10-30 4694
在上面的table中，使用了两处的渲染，第一个是是否，第二个是两个按钮 我们选来看第二个，两个按钮的渲染，这个里面没有条件 { title: '操作', dataIndex: 'rowguid', key: 'rowguid', render: (text, record) => ( <Space> <Button type="primary" size="small" onClick= ...
Antd Table组件，state改变，但是render并不会重新渲染
坚强的泡沫的博客
05-09 1341
Antd Table组件，state改变，但是render并不会重新渲染
React中function组件中异步函数拿不到useState的最新值，如何解决
weixin_43199787的博客
02-08 192
这样直接在异步函数里使用countRef.current就可以了。
antd父组件获取子组件表单的值
虚怀若愚
02-08 2592
文章目录实现功能组件关系基本思路父组件中关键代码子组件中关键代码完整代码父组件AccountManage.js子组件AccountRoleSearchBar.js子组件UserMainForm.js 实现功能 编写用户管理模块前端界面，实现用户的增加、查询、删除、更新操作，为了体现React模块的复用性，拆分为1个父组件和2个子组件，整体效果如下： 整体页面： 新增和编辑用户弹出窗UserMai...
vue3 + antd Table组件自定义表头数据，修改后数据存vuex、sessionStorage（缓存版）
agua001的博客
03-16 2666
动态设置表头数据，刷新依然是修改最后一次的状态，且显示位置顺序不被打乱，vuex + 本地缓存
react使用antd组件合并Table单元格
wx258852的博客
12-06 1285
初始化合并单元格，必须对应projectnameRowSpan行名称重新组合方法。行数据可编辑方法，总数据编辑。
react useState 获取不到最新值，大佬快来拯救卡拉米(已处理)
B_shuo的博客
01-07 802
用的antd的分页onChange事件获取pageNum, pageSize，然后直接用useState赋值，再用这个对象调用列表查询。要被react的useState玩死了，总是获取不到最新值，跪求大佬😭😭（不用useEffect的）这种方式，确实能正确的更改掉pageSize，但我还想把pageNum也获取一下，但怎么都不成功。但问题是，actorListApi(searchParams)怎么都获取不到最新的值，崩了啊。所以使用useState的回调函数。
antd table 渲染未完成离开页面，重新回去表格渲染错误
Cooky的博客
10-27 1071
1
【原创】antdesign表格组件column的API里render方法详解
yiran1919的博客
04-11 1343
第一次接触antdesign，对于table组件还不是很了解，那就啃官方文档吧。这两天做项目，有一个后台的接口，返回的数据为数字，但是前台要展示它的中文值。在column里有个render方法，那就用它试试。如下图，原始代码及前台展示。
【react hook】在react hook组件中，使用Antd Table组件，columns数据异步获取，list数据更新但没有rerender解决办法
hzxOnlineOk的博客
11-10 1035
其中，a属性是一个数组，这意味着无法在第二个useEffect中直接指定datasource作为依赖项，因为它是浅比较的，需要使用JSON.stringify(datasource)作为依赖，检测字符串长度是否发现变化。并且因为以上的案例，我们发现数据虽然打印出来更新了，但是却没有触发rerender，导致columns的数据仍旧是上一次的，这时，我们需要再增加一个状态，用来提示更新。
antd Table 组件 columns 列定义 render 属性问题
热门推荐
本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！
04-19 1万+
上周玩了两天 React，用 React + antd + Table 实现一个简单的列表功能，列表组件渲染时，`this` 对象跟当前组件定义不是同一个，导致定位不到对应的操作事件。
【antd】解决Table组件改变dataSource没有重新渲染问题记录
mytac的博客
06-30 1万+
维护一个state，类型为tree结构，Table组件中dataSource要绑定这个树的cur指针指向的某个节点下的子节点数组。当我准备删除某个节点时，却发现视图上没有变化。我最开始怀疑是react没有检测到state变化，所以没有rerender，自己自制了forceupdate方法，见我另一篇博文：《函数组件强制渲染 模仿forceUpdate》，使用forceUpdate确实能强制令视图更新。且，我在视图层打印dataSource绑定的数据也能发现，确实是更新，数据有变化，但是Table组件就是没有
ant design table render问题
qq_36384745的博客
04-18 1934
ant-design table render问题，render+switch语句用法，render+switch Unreachable code报错
antd Protable高级表格 缓存列设置
jp2021的博客
05-22 1620
以下文章实现前端缓存列展示功能：自定义表格列展示顺序、是否展示、是否固定。高级表格的Protable.columnsState可以很好的帮助我们。
react antd columns更新state
11-21
在React Ant Design框架中，如果你想要更新表格columns的状态，通常是在组件的状态（state）改变时同步更新列配置。例如，你可以创建一个包含列配置的对象数组，然后将其作为`columns` prop传递给`Table`组件。当你...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值