React——setState 新旧值复用问题

异步状态更新获取新值问题

  • 问题
  • 解决

问题

const updateFrameRange = (frameNumber, rangeValue) => {//const startFrame = Math.max(frameNumber - rangeValue.before, 1);const endFrame = Math.min(frameNumber + rangeValue.after, maxFrame);
console.log(frameNumber,rangeValue)const newFrameRange = Object.values(Data?.frames || {}).slice(startFrame - 1, endFrame).map((frame) => frame.timestamp);setFrameRange(newFrameRange);};const handleFrameRangeBeforeChange = (e) => {const value = parseInt(e.target.value, 10);if (!isNaN(value) && value >= 0) {setFrameRangeValue((prev) => ({ ...prev, before: value }));updateFrameRange(frameNumber, frameRangeValue);}};const handleFrameRangeAfterChange = (e) => {const value = parseInt(e.target.value, 10);if (!isNaN(value) && value >= 0) {setFrameRangeValue((prev) => ({ ...prev, after: value }));updateFrameRange(frameNumber, frameRangeValue);}};

这一块代码updateFrameRange每次获取到的第二个参数都是上一个状态的旧值,我想立马获取到frameRangeValue更新后的新值.

解决

setFrameRangeValue 是异步的,所以当你在状态更新后立即调用 updateFrameRange 时,frameRangeValue 仍然是旧的值。为了解决这个问题,你可以先计算出新的值,然后将其传递给 updateFrameRange,而不是依赖尚未更新的状态值。

你可以这样修改代码,确保 updateFrameRange 使用的是最新的值:

1.	在 handleFrameRangeBeforeChange 和 handleFrameRangeAfterChange 中,先计算新的 frameRangeValue,然后再分别传递给 setFrameRangeValue 和 updateFrameRange。
2.	这样做可以确保 updateFrameRange 使用的是刚计算出的新值,而不是等待异步状态更新完成。
const updateFrameRange = (frameNumber, rangeValue) => {const startFrame = Math.max(frameNumber - rangeValue.before, 1);const endFrame = Math.min(frameNumber + rangeValue.after, maxFrame);const newFrameRange = Object.values(Data?.frames || {}).slice(startFrame - 1, endFrame).map((frame) => frame.timestamp);setFrameRange(newFrameRange);
};const handleFrameRangeBeforeChange = (e) => {const value = parseInt(e.target.value, 10);if (!isNaN(value) && value >= 0) {// 先计算新的 frameRangeValueconst newRangeValue = { ...frameRangeValue, before: value };setFrameRangeValue(newRangeValue);updateFrameRange(frameNumber, newRangeValue); // 直接传递更新后的值}
};const handleFrameRangeAfterChange = (e) => {const value = parseInt(e.target.value, 10);if (!isNaN(value) && value >= 0) {// 先计算新的 frameRangeValueconst newRangeValue = { ...frameRangeValue, after: value };setFrameRangeValue(newRangeValue);updateFrameRange(frameNumber, newRangeValue); // 直接传递更新后的值}
};

所以应该尽量避免依赖异步状态更新完成。

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

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

相关文章

【C++前后缀分解 降维】2906. 构造乘积矩阵|2074

前后缀分解 C前后缀分解 LeetCode2906. 构造乘积矩阵 给你一个下标从 0 开始、大小为 n * m 的二维整数矩阵 grid ,定义一个下标从 0 开始、大小为 n * m 的的二维矩阵 p。如果满足以下条件,则称 p 为 grid 的 乘积矩阵 : 对于每个元素 p[…

使用python 将world的题库导入某学习软件的模板

本python中使用了模块: re:用于写正则 python-docx:用于读取worl中的数据 openpyxl:用于将内容写入excel -----------------------------------------前言----------------------------------------------- 此代码仅可以使用&#xff0c…

数据结构之‘栈’

文章目录 1.简介2. 栈的初始化和销毁3. 进栈和出栈3.1 进栈3.2 出栈3.3 栈的打印 1.简介 一种特殊的线性表,其只允许在固定的一端进行插入和删除元素操作。进行(数据插入和删除操作)的一端称为栈顶,另一端称为栈底。压栈&#xf…

C语言之预处理详解(完结撒花)

目录 前言 一、预定义符号 二、#define 定义常量 三、#define定义宏 四、宏与函数的对比 五、#和## 运算符 六、命名约定 七、#undef 八、条件编译 九、头文件的包含 总结 前言 本文为我的C语言系列的最后一篇文章,主要讲述了#define定义和宏、#和##运算符、各种条件…

W25QXX系列Flash存储器模块驱动代码

目录 W25QXX简介 硬件电路 W25Q128框图 Flash操作注意事项 驱动代码 W25QXX.h W25QXX.c W25QXX简介 W25Qxx系列是一种低成本、小型化、使用简单的非易失性存储器,常应用于数据存储、字库存储、固件程序存储等场景 存储介质:Nor Flash&#xff0…

算法入门-贪心1

第八部分:贪心 409.最长回文串(简单) 给定一个包含大写字母和小写字母的字符串 s ,返回通过这些字母构造成的最长的回文串 的长度。 在构造过程中,请注意 区分大小写 。比如 "Aa" 不能当做一个回文字符串…

如何通过 PhantomJS 模拟用户行为抓取动态网页内容

引言 随着网页技术的不断进步,JavaScript 动态加载内容已成为网站设计的新常态,这对传统的静态网页抓取方法提出了挑战。为了应对这一挑战,PhantomJS 作为一个无头浏览器,能够模拟用户行为并执行 JavaScript,成为了获…

Android RecycleView 深度解析与面试题梳理

本文首发于公众号“AntDream”,欢迎微信搜索“AntDream”或扫描文章底部二维码关注,和我一起每天进步一点点 引言 在 Android 开发中,列表和网格布局是非常常见的界面元素,它们用于展示大量数据集合。RecyclerView 是 Android 提…

小众语言ruby在苹果中的初步应用

前言 感觉Ruby在苹果系统中充当一种脚本语言来使用。 1、直接输入ruby没有反应 2、可显示结果的命令 ruby -e "puts Goodbye, cruel world!" 效果如下图: 说明苹果系统中ruby已经安装完毕,或者就是自带的。 3、编辑运行第一个ruby程序 输入…

nodejs+express+vue教辅课程辅助教学系统 43x2u前后端分离项目

目录 技术栈具体实现截图系统设计思路技术可行性nodejs类核心代码部分展示可行性论证研究方法解决的思路Express框架介绍源码获取/联系我 技术栈 该系统将采用B/S结构模式,开发软件有很多种可以用,本次开发用到的软件是vscode,用到的数据库是…

MySQL学习(视图总结)

文章目录 MySQL的视图视图基本操作创建视图修改视图 练习 MySQL的视图 视图是虚拟的表,是从数据库中一个或多个表中导出来的表,作用是可以隐藏一些数据,也可以将一些复杂的查询结果做成视图。数据库只保存视图的定义,而不保存视图…

运维最难的是哪些部分呢

在讨论运维工作中,监控通常被视为一个核心且至关重要的环节,但它是否可以被简单地定义为“最难”的工作,则取决于多种因素,包括但不限于技术复杂度、资源投入、团队结构、业务特性以及故障应对的及时性等。以下是对运维中监控工作…

基因组注释工具MAKER的报错与解决方法

基因组注释工具MAKER的报错与解决措施 ● 报错1 ● 报错内容:ERROR: Could not determine if DFam is installed ● 解决措施: ● export LIBDIR/your_path/envs/maker/share/RepeatMasker/Matrices ● export LIBDIR/your_path/envs/maker/share/R…

Linux常见查看文件命令

目录 一、cat 1.1. 查看文件内容 1.2. 创建文件 1.3. 追加内容到文件 1.4. 连接文件 1.5. 显示多个文件的内容 1.6. 使用管道 1.7. 查看文件的最后几行 1.8. 使用 -n 选项显示行号 1.9. 使用 -b 选项仅显示非空行的行号 二、tac 三、less 四、more 五、head 六、…

解决Gson将长数字( json字符串)转换为科学记数法格式

Gson(又称Google Gson)是Google公司发布的一个开放源代码的Java库,主要用途为序列化Java对象为JSON字符串,或反序列化JSON字符串成Java对象。 依赖 Gradle: dependencies {implementation com.google.code.gson:gson:2.11.0 }…

sql中行转列 列转行

场景 在平常使用中,我们经常会遇到行专列,列转行进行查询的操作 或者 一行转多列的情况 我们接下来讨论如何通过一条语句实现,动态sql创建的方式暂时除外,当然你可以可以使用动态sql创建为存储过程,我会介绍几种常用…

nginx基础篇(一)

文章目录 学习链接概图一、Nginx简介1.1 背景介绍名词解释 1.2 常见服务器对比IISTomcatApacheLighttpd其他的服务器 1.3 Nginx的优点(1)速度更快、并发更高(2)配置简单,扩展性强(3)高可靠性(4)热部署(5)成本低、BSD许可证 1.4 Nginx的功能特性及常用功能基本HTTP服…

内存压力测试工具的开发与实现

内存压力测试工具的开发与实现 一、工具设计概述二、工具实现1. 伪代码设计2. C代码实现三、工具使用与扩展四、结论在软件开发过程中,内存稳定性与可靠性是确保系统长期稳定运行的关键因素。为了验证系统在高负载下的内存表现,内存压力测试工具显得尤为重要。本文将基于C语言…

上市公司-客户ESG数据集(dta+xlsx+参考文献)(2009-2023年)

参考《经济问题》中李普玲(2024)的做法,将供应商与主要客户数据对应起来,并对上市公司及关联上市公司的ESG数据进行匹配,形成“供应商——客户ESG”的数据集,保留客户的销售占比 一、数据介绍 数据名称&am…

pdf文件怎么转换成ppt?介绍几种pdf转ppt的方法

pdf文件怎么转换成ppt?将pdf文件转换成ppt格式是一种常见且实用的需求,特别是在制作演示文稿和准备报告时。pdf格式因其文件内容的固定排版和高兼容性而广泛应用于文档的保存和分享。然而,在某些情况下,将pdf文件转换为ppt格式可以…