【react hook】在react hook组件中,使用Antd Table组件,columns数据异步获取,list数据更新但没有rerender解决办法

情景描述

我们有一个react组件,显示了一个Antd Table组件,设置了一个columns变量并复制给Table的columns属性,由于我们请求的datasource来源是异步的,示例伪代码如下:

const [columns, setColumns] = useState([]); // 注意columns放在全局直接定义,是无法通过依赖提醒react进行rerender的!!!已尝试使用useMemo包裹全局的columns进而触发依赖更新的计划失败。
const [datasource, setDatasource] = useState([]);
useEffect(() => {// 假设这边是一个请求列表数据的promise.then回调的伪代码promise.then(res) => {let list = JSON.parse(JSON.stringify(res.list));// 数据格式如下注释:// list = [// 	a: [//		{ key: 'address', value: '广东省汕头市', lng: 114.12, lat: 68.33 }//	],//	b: 1,//	c: 2,// ];这边做一些异步操作async/await...// list 中的a数组的每个元素的地址value需要根据高德地图API转换成特定国际化语言环境,比如中文转英文,这个时候就需要异步调用逆编码根据经纬度获取英文地址了,这个过程是异步且耗费时间的,当react同步代码执行完毕后,数据仍旧过了200ms才返回,这时react的检测已经过期了,无法触发rerendersetDatasource(list);}
}, [])useEffect(() => {setColumns([{key: 'address',...render: (text, row) => {// 这边的数据依赖于res.list的数据进行异步映射赋值加工后返回的}},// ...省略]);
}, [datasource])

其中,a属性是一个数组,这意味着无法在第二个useEffect中直接指定datasource作为依赖项,因为它是浅比较的,需要使用JSON.stringify(datasource)作为依赖,检测字符串长度是否发现变化。

并且因为以上的案例,我们发现数据虽然打印出来更新了,但是却没有触发rerender,导致columns的数据仍旧是上一次的,最蠢的办法是用setTimeout延迟设置,但是这样准确性低,所以这时,我们需要再增加一个状态,用来提示更新。

因此,修改后代码如下:

const [needRefresh, setNeedRefresh] = useState('');
		// 假设以下代码是如上代码的异步操作详情,那么setNeedRefresh将再循环的最后一次进行标记,标记所有项的异步数据都获取并设置成功了。const arr = [];draftAbstract.forEach(async (t, i) => {const addr = await getSearchAddressByLang(itemData.longitude, itemData.latitude, addr);values = addr || itemData?.address;t.itemValue = values;arr.push(t);// 地址全部计算完成,设置异步完成标记,// 将needRefresh设置为columns需要更新的依赖项,避免同步检测时因异步结果没有得到时无法正确渲染if (i + 1 === draftAbstract.length) {setNeedRefresh(new Date().getTime());}});
useEffect(() => {setColumns([{key: 'address',...render: (text, row) => {// 这边的数据依赖于res.list的数据进行异步映射赋值加工后返回的}},// ...省略]);
}, [JSON.stringify(datasource), needRefresh])

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/138101.shtml

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

相关文章

Java通过javacv获取视频、音频、图片等元数据信息(分辨率、大小、帧等信息)

相信我们都会或多或少需要给前端返回视频或者音频的一些信息,那么今天这篇文章通过Java语言使用javacv来获取视频、音频、图片等元数据信息(分辨率、大小、帧等信息) 一、首先导入依赖 可以先导入javacv/javacv-platform依赖,由…

【 云原生 | K8S 】Kubernetes 概述

Kubernetes 概述 1 K8S 是什么? K8S 的全称为 Kubernetes (K12345678S),PS:“嘛,写全称也太累了吧,不如整个缩写”。 作用: 用于自动部署、扩展和管理“容器化(containerized)应用…

确定性 vs 非确定性:GPT 时代的新编程范式

分享嘉宾 | 王咏刚 责编 | 梦依丹 出品 | 《新程序员》编辑部 在 ChatGPT 所引爆的新一轮编程革命中,自然语言取代编程语言,在只需编写提示词/拍照就能出程序的时代,未来程序员真的会被简化为提示词的编写员吗?通过提示词操纵 …

安卓常见设计模式13------过滤器模式(Kotlin版)

W1 是什么,什么是过滤器模式?​ 过滤器模式(Filter Pattern)是一种常用的结构型设计模式,用于根据特定条件过滤和筛选数据。 2. W2 为什么,为什么需要使用过滤器模式,能给我们编码带来什么好处…

二分法

文章目录 二分法概述二分 > value最左的位置二分 < value最右的位置局部最小值问题 二分法概述 什么是二分法呢&#xff1f;相信大家都有所了解&#xff0c;举个最经典的二分的例子。 ​ 给定一个整型有序数组&#xff0c;和一个值 v a l u e value value&#xff0c;如…

Docker+K8s基础(重要知识点总结)

目录 一、Docker的核心1&#xff0c;Docker引擎2&#xff0c;Docker基础命令3&#xff0c;单个容器运行多个服务进程4&#xff0c;多个容器运行多个服务进程5&#xff0c;备份在容器中运行的数据库6&#xff0c;在宿主机和容器之间共享数据7&#xff0c;在容器之间共享数据8&am…

OAuth2.0双令牌

OAuth 2.0是一种基于令牌的身份验证和授权协议&#xff0c;它允许用户授权第三方应用程序访问他们的资源&#xff0c;而不必共享他们的凭据。 在OAuth 2.0中&#xff0c;通常会使用两种类型的令牌&#xff1a;访问令牌和刷新令牌。访问令牌是用于访问资源的令牌&#xff0c;可…

Proteus仿真--基于数码管设计的可调式电子钟

本文主要介绍基于51单片机的数码管设计的可调式电子钟实验&#xff08;完整仿真源文件及代码见文末链接&#xff09; 仿真图如下 其中数码管主要显示电子钟时间信息&#xff0c;按键用于调节时间 仿真运行视频 Proteus仿真--数码管设计的可调式电子钟&#xff08;仿真文件程…

基于STM32设计的智能水母投喂器(华为云IOT)

基于STM32设计的智能水母养殖系统 一、设计简述 1.1 项目背景 水母是一种非常美丽和神秘的生物,在许多人的眼中,它不仅是一种宽广的海洋世界中的一道美丽的风景线,同时也是一种珍贵的实验动物和养殖资源。随着水母的养殖需求不断增多,一个高效、智能、可控的水母养殖系统…

【Proteus仿真】【51单片机】汽车尾灯控制设计

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真51单片机控制器&#xff0c;使用按键、LED模块等。 主要功能&#xff1a; 系统运行后&#xff0c;系统运行后&#xff0c;系统开始运行&#xff0c;K1键控制左转向灯&#xff1b;…

矢量图形编辑软件Boxy SVG mac中文版软件特点

Boxy SVG mac是一款基于Web的矢量图形编辑器&#xff0c;它提供了一系列强大的工具和功能&#xff0c;可帮助用户创建精美的矢量图形。Boxy SVG是一款好用的软件&#xff0c;并且可以在Windows、Mac和Linux系统上运行。 Boxy SVG mac软件特点 简单易用&#xff1a;Boxy SVG的用…

代码随想录 Day40 动态规划08 LeetCodeT198打家劫舍 T213打家劫舍II T337 打家劫舍III

动规五部曲: 1.确定dp数组含义 2.确定递推公式 3.初始化dp数组 4.确定遍历顺序 5.打印数组排错 LeetCode T198 打家劫舍 题目链接:198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 题目思路: 今天我们走出背包问题,开始进入新一轮经典问题的学习:打家劫舍问题. 题目大概…

CSS 中BFC是什么?

在CSS中&#xff0c;BFC&#xff08;块级格式化上下文&#xff09;是一个重要的概念&#xff0c;它对于理解和解决布局中的一些问题非常有帮助。本文将深入探讨BFC是什么&#xff0c;以及如何使用代码来详细解释BFC的概念和应用。 引言 在Web开发中&#xff0c;页面布局是一个…

Linux文件类型与权限及其修改

后面我们写代码时&#xff0c;写完可能会出现没有执行权限什么的&#xff0c;所以我们要知道文件都有哪些权限和类型。 首先 就像我们之前目录结构图里面有个/dev,它就是存放设备文件的&#xff0c;也就是说&#xff0c;哪怕是一个硬件设备&#xff0c;例如打印机啥的&#xf…

机器学习算法——线性回归与非线性回归

目录 1. 梯度下降法1.1 一元线性回归1.2 多元线性回归1.3 标准方程法1.4 梯度下降法与标准方程法的优缺点 2. 相关系数与决定系数 1. 梯度下降法 1.1 一元线性回归 定义一元线性方程 y ω x b y\omega xb yωxb 则误差&#xff08;残差&#xff09;平方和 C ( ω , b ) …

【lib.dll.a.so】Windows和Linux两个系统下的库文件

1.静态库&&动态库 Windows平台下&#xff1a;静态库后缀为.lib&#xff0c;动态库后缀为.dll Linux平台下&#xff1a;静态库格式为lib**.a&#xff0c;动态库格式为lib**.so 谈论两者区别之前&#xff0c;需要对程序编译和运行有一个大致认识&#xff1a; 代码想要…

微带线的ABCD矩阵的推导、转换与级联-Matlab计算实例

微带线的ABCD矩阵的推导、转换与级联-Matlab计算实例 散射参数矩阵有实际的物理意义&#xff0c;但是其无法级联计算&#xff0c;但是ABCD参数和传输散射矩阵可以级联计算&#xff0c;在此先简单介绍ABCD参数矩阵的基本用法。 1、微带线的ABCD矩阵的推导 其他的一些常用的二端…

基于SSM的自习室预订座位管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

StartUML的基本使用

文章目录 简介和安装创建包创建类视图时序图 简介和安装 最近在学习一个项目的时候用到了StartUML来构造项目的类图和时序图 虽然vs2019有类视图&#xff0c;但是也不是很清晰&#xff0c;并没有生成uml图&#xff0c;但是宇宙最智能的IDE IDEA有生成uml图的功能 下面就简单介…

C++ static关键字

C static关键字 1、概述2、重要概念解释3、分情况案例解释3.1 static在类内使用3.2 static在类外使用案例一&#xff1a;案例二&#xff1a;案例三 1、概述 static关键字分为两种情况&#xff1a; 1.在类内使用 2.在类外使用 2、重要概念解释 &#xff08;1&#xff09;翻译…