React的usestate设置了值后马上打印获取不到最新值

 我们在使用usestate有时候设置了值后,我们想要更新一些值,这时候,我们要想要马上获取这个值去做一些处理,发现获取不到,这是为什么呢?

效果如下:

1、原因如下

React中,当你使用useState钩子来管理状态,并尝试更新这个状态时,需要注意React的
状态更新是异步的
。这意味着当你调用setExpandKeysData函数时,React不会立
即更新expandKeysData的值,而是将这个更新排入队列,并在未来的某个时间点(通常是
当前的事件处理函数执行完毕后)应用这个更新。

我们要怎么能正确获取到呢?可以在useEffect中获取,注意如果有查询列表 的useEffect不要放一起,避免一直刷新,单独写一个新的useEffect即可

因此,如果你在设置状态后立即打印expandKeysData的值,你可能会看到旧的值,而不是新的值。这是因为React还没有来得及应用这个更新。为了解决这个问题,你可以使用几种方法:

方法一:使用useEffect钩子来观察状态变化:useEffect可以让你在状态变化后执行一些副作用操作,比如打印新的状态值。你可以将expandKeysData作为useEffect的依赖项之一,这样每当expandKeysData
变化时,useEffect就会执行。

方法二:在回调函数中更新状态:如果你需要在状态更新后执行某些操作,并且这些操作依赖于新的状态值,你可以考虑将这些操作放在一个回调函数中,并通过setState函数的第二个参数(如果它是函
数形式的话)来传递这个回调函数。但是,需要注意的是,useState的更新函数并不直接支持这种形式的回调。因此,这种方法更适用于useReducer或类组件中的setState。不过,对于useState,你可
以通过useEffect来实现类似的效果。

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

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

相关文章

基于STC89C51单片机的烟雾报警器设计(煤气火灾检测报警)(含文档、源码与proteus仿真,以及系统详细介绍)

本篇文章论述的是基于STC89C51单片机的烟雾报警器设计的详情介绍,如果对您有帮助的话,还请关注一下哦,如果有资源方面的需要可以联系我。 目录 摘要 原理图 实物图 仿真图 元件清单 代码 系统论文 资源下载 摘要 随着现代家庭用火、…

navicat15已连接忘记密码

1.导出链接 2.使用文本打开 connections.ncx UserName"root" PasswordXXXX 3.复制加密密码&#xff0c;在线解密 代码在线运行 - 在线工具 php解密代码 <?php class NavicatPassword {protected $version 0;protected $aesKey libcckeylibcckey;protected…

C语言学习笔记[26]:循环语句do...while①

do...while语句 do...while的语法格式 do循环语句; while(表达式); 用do...while语句实现打印0~10 #include <stdio.h>int main() {int i 0;do{printf("%d\n", i);i;} while (i < 10);return 0; } do...while是先进行一次循环以后&#xff0c;再进行判…

R语言包AMORE安装报错问题以及RStudio与Rtools环境配置

在使用R语言进行AMORE安装时会遇到报错&#xff0c;这时候需要采用解决办法&#xff1a; AMORE包安装&#xff0c;需要离线官网下载安装包&#xff1a; Index of /src/contrib/Archive/AMORE (r-project.org)https://cran.r-project.org/src/contrib/Archive/AMORE/ 一、出现…

[C++初阶]list的模拟实现

一、对于list的源码的部分分析 1.分析构造函数 首先&#xff0c;我们一开始最先看到的就是这个结点的结构体&#xff0c;在这里我们可以注意到这是一个双向链表。有一个前驱指针&#xff0c;一个后继指针。然后在有一个存储数据的空间 其次它的迭代器是一个自定义类型&#x…

图片太大怎么压缩变小?交给这4个方法就能行

在钱塘江畔&#xff0c;一场罕见的“蝴蝶潮”翩然而至&#xff0c;不仅带来了自然奇观&#xff0c;也预示着好运的降临。然而&#xff0c;当我们将这份美好瞬间分享给更多人时&#xff0c;却遇到了一个小小难题——高分辨率的照片占据了大量的存储空间&#xff0c;上传至社交平…

HBuilderX打包流程(H5)?HBuilder如何发布前端H5应用?前端开发怎样打包发布uniapp项目为h5?

打包步骤&#xff1a; 1、打开hbuilder x》发行》网站-PC Web或手机H5(仅适用于uni-app)(H) 2、面板里的所有信息都可以不填&#xff0c;也不用勾选》直接点击【发行】即可 3、打包成功&#xff1a; 4、部署 按照打包后的路径&#xff0c;找到打包好的文件夹&#xff0c;把文…

【5G Sub-6GHz模块】专为IoT/eMBB应用而设计的RG520NNA、RG520FEB、RG530FNA、RG500LEU 5G模组

推出全新的5G系列模组&#xff1a; RG520NNADB-M28-SGASA RG520NNADA-M20-SGASA RG520FEBDE-M28-TA0AA RG530FNAEA-M28-SGASA RG530FNAEA-M28-TA0AA RG500LEUAA-M28-TA0AA ——明佳达 1、5G RG520N 系列——专为IoT/eMBB应用而设计的LGA封装模块 RG520N 系列是一款专为 IoT…

使用 ABBYY FineReader PDF 15 在创建或转换 PDF 时自动生成书签

使用 ABBYY 为 PDF 文件添加书签&#xff0c;可以帮助快速定位文档中的主要内容&#xff0c;也能更方便的梳理出一份文档大纲。 有很多 PDF 文件在创建时并没有编辑书签&#xff0c;这里介绍使用 ABBYY FineReader PDF 15&#xff08;Win 系统&#xff09;在 PDF 中自动添加书…

知识分享:网贷大数据查询会影响个人征信吗?

随着人们对传统征信的认识不断加深和对个人征信的重视&#xff0c;部分网友就有一种疑问&#xff0c;那就是关于网贷大数据查询对征信有没有影响的问题&#xff0c;小易大数据小编就用本文就为大家详细讲解一下&#xff0c;希望对你了解网贷大数据有帮助。 首先网贷大数据与征信…

睿考网:2024注册会计师考试考试在即,如何备考?

2024年注册会计师考试即将开始&#xff0c;准考证打印时间安排在8月5日至20日&#xff0c;每天上午8点至晚上8点&#xff0c;考生要确保在规定时间内完成准考证的打印。 注册会计师考试包含六个科目&#xff0c;每个科目都有其独特的特点和难度。考生需要根据各科目的特性采用…

Win11鼠标卡顿 - 解决方案

问题 使用Win11系统使&#xff0c;鼠标点击任务栏的控制中心&#xff08;如下图&#xff09;时&#xff0c;鼠标会有3秒左右的卡顿&#xff0c;同时整个显示屏幕也有一定程度的卡顿。 问题原因 排除鼠标问题&#xff1a;更换过不同类型的鼠标&#xff0c;以及不同的连接方式…

【C++刷题】[UVA 489]Hangman Judge 刽子手游戏

题目描述 题目解析 这一题看似简单其实有很多坑&#xff0c;我也被卡了好久才ac。首先题目的意思是&#xff0c;输入回合数&#xff0c;一个答案单词&#xff0c;和一个猜测单词&#xff0c;如果猜测的单词里存在答案单词里的所有字母则判定为赢&#xff0c;如果有一个字母是答…

Unity3d开发google chrome的dinosaur游戏

游戏效果 游戏中&#xff1a; 游戏中止&#xff1a; 一、制作参考 如何制作游戏&#xff1f;【15分钟】教会你制作Unity小恐龙游戏&#xff01;新手15分钟内马上学会&#xff01;_ unity教学 _ 制作游戏 _ 游戏开发_哔哩哔哩_bilibili 二、图片资源 https://download.csdn.…

9.Kafka消费者API实践

目录 概述实践topic消费者效果 消费指定topic的某个分区代码效果kafka分区策略-Range 概述 Kafka消费者API实践 实践 topic # ./kafka-topics.sh --bootstrap-server localhost:9092 --create --partitions 3 --replication-factor 1 --topic test03 [roothadoop02 bin]# ./…

【问题解决】Jetson nano 安装pytorch使用GPU推理

一. 问题描述 安装 yolov8 后只调用cpu推理图片 二. 解决步骤 2.1 在推理环境下&#xff0c;执行下面命令卸载pytorch pip uninstall torch torchtext torchaudio2.2 下载PyTorch的依赖: sudo apt-get -y update; sudo apt-get -y install libopenblas-dev;###2.3 下载py…

深入全面概括C语言的运算符

目录 二.算术运算符 三.自增自减运算符 四.赋值运算符 五.关系运算符 六.逻辑运算符 七.三元运算符 九.运算符的优先级 一.前言 c语言的运算符可以分为六种&#xff0c;分别是&#xff1a;1.算术运算符&#xff1b;2.自增自减运算符&#xff1b;3.赋值运算符&#xff1b…

uniapp转小程序,小程序转uniapp方法

&#x1f935; 作者&#xff1a;coderYYY &#x1f9d1; 个人简介&#xff1a;前端程序媛&#xff0c;目前主攻web前端&#xff0c;后端辅助&#xff0c;其他技术知识也会偶尔分享&#x1f340;欢迎和我一起交流&#xff01;&#x1f680;&#xff08;评论和私信一般会回&#…

python-字符金字塔(赛氪OJ)

[题目描述] 请打印输出一个字符金字塔&#xff0c;字符金字塔的特征请参考样例。输入格式&#xff1a; 输入一个字母&#xff0c;保证是大写。输出格式&#xff1a; 输出一个字母金字塔&#xff0c;输出样式见样例。样例输入 C样例输出 A ABA …

【ffmpeg命令基础】过滤处理

文章目录 前言过滤处理的介绍两种过滤类型简单滤波图简单滤波图是什么简单滤波示例 复杂滤波图复杂滤波是什么区别示例 总结 前言 FFmpeg是一款功能强大的开源音视频处理工具&#xff0c;广泛应用于音视频的采集、编解码、转码、流化、过滤和播放等领域。1本文将重点介绍FFmpe…