【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])
相关文章:
【react hook】在react hook组件中,使用Antd Table组件,columns数据异步获取,list数据更新但没有rerender解决办法
情景描述 我们有一个react组件,显示了一个Antd Table组件,设置了一个columns变量并复制给Table的columns属性,由于我们请求的datasource来源是异步的,示例伪代码如下: const [columns, setColumns] useState([]); /…...
ChatGPT的图识别来了
前几天ChatGPT推出了Dall-E 3功能,可以根据文字和描述一段话来生成一个或者一组图。 这次又来重磅了,图识别又来了!换句话说,也即是文生图,图生文都可以实现了,一起来试试 1、解释图中的意思 ࿰…...
java Stream编程笔记
文章目录 Stream介绍什么是 Stream? Stream中间操作过滤操作(filter)映射操作(map)排序操作(sorted)截断操作(limit 和 skip) Stream 的终止操作forEach 和 peek聚合操作…...
顶顶通语音识别使用说明
介绍 顶顶通语音识别软件(asrproxy)是一个对接了多种语音识别接口的语音识别系统。可私有化部署(支持中文英文和方言等,支持一句话识别、实时流识别、多声道录音文件识别。 原理 asrproxy内嵌了阿里达摩院的开源语音识别工具包FunASR,后续我们也会使用自有的预料…...
重磅发布 OpenAI 推出用户自定义版 ChatGPT
文章目录 重磅发布 OpenAI 推出用户自定义版 ChatGPT个人简介 重磅发布 OpenAI 推出用户自定义版 ChatGPT OpenAI 首届开发者大会 (OpenAI DevDay) 于北京时间 11 月 7 日凌晨 02:00 开始,大会上宣布了一系列平台更新。其中一个重要更新是用户可以创建他们自己的自定…...
Java 幼儿园(20231111)读取 json 文件
1、功能场景 (1)多人合作开发一个功能模块时,需要调用外部接口 (2)对方接口的开发工作还没有完成,只能提供一个返回值的示例文件 json 文件。 (3)返回的 json 数据多达几百个字段。 …...
云计算、大数据技术的智慧工地,实现对建筑工地实时监测、管理和控制的一种新型建筑管理方式
智慧工地是利用物联网、云计算、大数据等技术,实现对建筑工地实时监测、管理和控制的一种新型建筑管理方式。 智慧工地架构: 1、终端层: 充分利用物联网技术、移动应用、智能硬件设备提高现场管控能力。通过RFID、传感器、摄像头、手机等终…...
功能案例 -- 通过开关,改变白天和黑夜
效果展示 代码展示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><style>:root {--default-bac-color: #f…...
Linux编写一个极简版本的Shell
Linux编写一个极简版本的Shell 📟作者主页:慢热的陕西人 🌴专栏链接:Linux 📣欢迎各位大佬👍点赞🔥关注🚓收藏,🍉留言 本博客主要内容在Linux环境下ÿ…...
亚马逊云AI应用科技创新下的Amazon SageMaker使用教程
目录 Amazon SageMaker简介 Amazon SageMaker在控制台的使用 模型的各项参数 pytorch训练绘图部分代码 Amazon SageMaker简介 亚马逊SageMaker是一种完全托管的机器学习服务。借助 SageMaker,数据科学家和开发人员可以快速、轻松地构建和训练机器学习模型&#…...
Eigen:旋转向量(Angle-Axis)转换为四元素和旋转矩阵
0. 在固定欧拉角系下。 绕固定系旋转,旋转的先后顺序为X、Y、Z。当然也支持XYZ的任意顺序旋转。 1. 转为四元素 Eigen::Quaterniond q Eigen::AngleAxisd(yaw, Eigen::Vector3d::UnitZ()) *Eigen::AngleAxisd(pitch, Eigen::Vector3d::UnitY()) *Eigen::AngleAxi…...
C#8.0本质论第十二章--泛型
C#8.0本质论第十二章–泛型 C#通过泛型来促进代码重用,在词义上等价于C模板。 在泛型编程中,数据类型也是一种参数。 12.1如果C#没有泛型 为object的方法使用值类型时,“运行时”将自动对它进行装箱,获取值类型的实例时则需要…...
Python与ArcGIS系列(七)自动化打印地图
目录 0 简述1 获取可用打印机列表2 打印地图3 导出地图至PDF4 导出地图至图像0 简述 本篇介绍如何利用arcpy实现获取可用打印机列表、打印地图、导出地图至PDF和图像。 1 获取可用打印机列表 通过arcpy提供的ListPrinterNames()函数可以生成可用的打印机列表。 import arcpy.m…...
基于STM32单片机抢答器设计
**单片机设计介绍, 基于STM32单片机抢答器设计-Proteus仿真 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于STM32单片机的抢答器设计可以用于教育和培训场景中的抢答游戏或考试环节。以下是一个基本的介绍设计步骤…...
冯·诺伊曼体系结构--操作系统
文章目录 1.认识冯诺依曼系统1.1约翰冯诺依曼1.2冯诺依曼结构1.3存储器的读写速度1.4对冯诺依曼结构的认识1.5冯诺依曼结构在生活中的演示 2.操作系统--“搞管理”的软件2.1概念2.2OS存在的意义2.3管理的方式2.4系统调用和库函数概念 1.认识冯诺依曼系统 1.1约翰冯诺依曼 1.2冯…...
IDEA插件开发--持久化配置信息方案
这里写自定义目录标题 配置信息持久化存储保存配置文件的方式每种方式的实现方案1.PropertiesComponent:2.PersistentStateComponent:3.Project Settings:4.外部文件: 5.数据库:6.加密数据:7,自定义配置文件…...
Vscode禁止插件自动更新
由于电脑的vscode版本不是很新。2022.10月份的版本1.7.2,电脑vscode的python插件装的也是2022年4月份的某个版本,但插件经常自动更新,导致python代码无法Debug,解决办法: 点设置,搜autoUpdate, 把红色框选成无...
Zookeeper篇---第六篇
系列文章目录 文章目录 系列文章目录一、请简述Zookeeper的选主流程二、为什么Zookeeper集群的数目,一般为奇数个?三、知道Zookeeper监听器的原理吗?一、请简述Zookeeper的选主流程 Zookeeper的核心是原子广播,这个机制保证了各个Server之间的同步。实现这个机制的协议叫做…...
mysql数据库存储过程之游标(光标cursor)
游标是用来存储查询结果集的数据类型,在存储过程和函数中可以使用游标对结果集进行循环的处理。游标的使用包括游标的声明、open、fetch和close。 一、语法。 #声明游标 declare 游标名称 cursor for 查询语句; #开启游标 open 游标名称; #获取游标记录 fetch 游标…...
「帝国风暴兵」加入 The Sandbox,推出真实的全新人物化身系列和体验!
我们很高兴宣布与流行文化中最具标志性的娱乐品牌 Shepperton 设计工作室的「帝国风暴兵」达成合作伙伴关系。这一合作标志着该科幻品牌首次进入元宇宙,让风暴兵的粉丝们以全新的方式体验「帝国风暴兵」。 在这个体验中,玩家将置身于帝国风暴兵的营地&am…...
抖音评论采集工具:3步快速获取完整评论数据的终极指南
抖音评论采集工具:3步快速获取完整评论数据的终极指南 【免费下载链接】TikTokCommentScraper 项目地址: https://gitcode.com/gh_mirrors/ti/TikTokCommentScraper 想要深入分析抖音热门视频的用户反馈?希望了解竞品账号的互动情况?…...
别让Windows驱动变成“空间刺客“!Driver Store Explorer轻松拯救你的C盘
别让Windows驱动变成"空间刺客"!Driver Store Explorer轻松拯救你的C盘 【免费下载链接】DriverStoreExplorer Driver Store Explorer 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 你的C盘是不是经常莫名其妙变红࿱…...
FLUX.1-dev像素艺术生成器教程:提示词工程与16-bit风格关键词库
FLUX.1-dev像素艺术生成器教程:提示词工程与16-bit风格关键词库 1. 像素幻梦工坊简介 像素幻梦(Pixel Dream Workshop)是基于FLUX.1-dev扩散模型构建的新一代像素艺术生成工具。它采用明亮的16-bit像素风格界面设计,为创作者提供…...
DuinoCollections:嵌入式确定性容器库
1. DuinoCollections:面向嵌入式系统的确定性容器库在Arduino及各类MCU平台的固件开发中,开发者长期面临一个基础却棘手的问题:如何安全、高效、可预测地管理有限RAM中的数据集合?标准C STL容器(如std::vector、std::m…...
Pixel Couplet Gen步骤详解:支持繁体字输入与港澳台地区春联习俗适配逻辑
Pixel Couplet Gen步骤详解:支持繁体字输入与港澳台地区春联习俗适配逻辑 1. 项目背景与核心价值 Pixel Couplet Gen是一款融合传统春节文化与现代像素艺术风格的AI春联生成器。通过ModelScope大模型的强大生成能力,结合精心设计的8-bit复古游戏界面&a…...
Intv_AI_MK11模型加速原理剖析:.accelerate库在GPU推理中的应用
Intv_AI_MK11模型加速原理剖析:.accelerate库在GPU推理中的应用 1. 为什么你的AI模型跑得不够快? 如果你正在使用Intv_AI_MK11这类大模型,可能会发现即使在高配GPU上,推理速度也时常不尽如人意。想象一下,当用户等待…...
AI编程新选择:OpenCode集成Qwen3-4B模型,终端原生体验快速上手
AI编程新选择:OpenCode集成Qwen3-4B模型,终端原生体验快速上手 1. 引言:为什么选择OpenCode? 在AI编程助手领域,开发者常常面临三个核心痛点:模型切换不灵活、隐私安全顾虑、以及终端体验割裂。OpenCode的…...
乙巳马年春联生成终端Matlab仿真应用:传统文化与计算科学的结合
乙巳马年春联生成终端Matlab仿真应用:传统文化与计算科学的结合 春节贴春联,是传承千年的文化习俗。一副好的春联,既要对仗工整、平仄协调,又要蕴含美好的寓意。如今,随着人工智能技术的发展,我们有了新的…...
千问3.5-9B快速部署教程:10分钟在星图GPU平台完成推理服务搭建
千问3.5-9B快速部署教程:10分钟在星图GPU平台完成推理服务搭建 1. 前言:为什么选择千问3.5-9B 千问3.5-9B作为当前轻量级大模型的代表,在保持9B参数规模的同时,展现出接近70B模型的推理能力。对于想快速体验大模型能力又不想折腾…...
JMS, ActiveMQ 学习一则约
开发个什么Skill呢? 通过 Skill,我们可以将某些能力进行模块化封装,从而实现特定的工作流编排、专家领域知识沉淀以及各类工具的集成。 这里我打算来一次“套娃式”的实践:创建一个用于自动生成 Skill 的 Skill,一是用…...
