react useState异步问题

1.

useState执行后 不能立马拿到新的数据,下次更新绘图就可以拿到了
然后当执行完第一次render时候,比如去点击按钮啥的执行某个方法这个时候就可以拿到数据了
例子:
const UseState = () => {
// 函数组件中没有this
const [count, setCount] = useState(0)

const add = () => {
let newCount = count
console.log(‘value1’, count); // 0
setCount( newCount+= 1)
console.log(‘value2’, count); // 0
query()
}

const query = () => {
console.log(‘query函数中:’, count); // 0
}
return (


{count}


增加

)
}
在这里插入图片描述
解决方法:
1)可以将count的新值通过函数传参的方式传入query函数;
// 改写add和query函数;

const add = () => {
let newCount = count
console.log(‘value1’, count);
setCount( newCount+= 1)
console.log(‘value2’, count);
query(newCount)
}
const query = (count) => {
console.log(‘query函数中:’, count);
}
在这里插入图片描述
2)在useEffect中调用query函数,因为在useEffect中,组件dom已经更新完毕,可以拿到count的最新值;(缺点:每次count值改变,都会触发useEffect,从而执行query函数;)
// 组件每次渲染之后执行的操作,执行该操作时dom都已经更新完毕
useEffect(()=>{
// 1、可在此处拿到count更新后的值
console.log(‘value3’, count);
query()
}, [count])

const add = () => {
let newCount = count
console.log(‘value1’, count);
setCount( newCount+= 1)
console.log(‘value2’, count);
}
const query = () => {
console.log(‘query函数中:’, count);
}
在这里插入图片描述
3)通过useRef()定义一个可变的ref变量,通过current属性保存count可变值,从而在count更新后,通过ref的current属性拿到更新后的count值;注意:调用query函数时需要加上setTimeout()进行调用;

// 定义一个可变的countRef对象,该对象的current属性被初始化为传入的参数count;
const countRef = useRef(count)

// 在countRef.current属性中保存一个可变值count的盒子;
countRef.current = count

const add = () => {
let newCount = count
console.log(‘value1’, count);
setCount( newCount+= 1)
console.log(‘value2’, count);
setTimeout(() => query(), 0);
}

const query = () => {
console.log(‘query函数中:’, countRef.current);
}
在这里插入图片描述

2.

下次更新绘图就可以拿到了
然后当执行完第一次render时候,比如去点击按钮啥的执行某个方法这个时候就可以拿到新的数据了
例子:
const [init, setInit] = useState()
const inti = async () => {
setInit(true)
};
useEffect(() => {
init();
}, []);
const fn = async () => {
console.log(881, init);
};

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

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

相关文章

vlan的通信(hcia)

有两种情况 第一种 vlanif的接口 VLANIF接口:VLANIF接口是一种三层的逻辑接口。在VLANIF接口上配置P地址 后,没备会在MAC地址表中添加VLANIF接口的MAC地址VD表项,并且为表项的 三层转发标志位置位。当报文的目的MAC地址匹配该表项后&a…

Linux-----17、软件包管理

# 软件包管理 # 1、软件包分类 # ㈠ 软件包类型 二进制包源码包 # ① 二进制包 什么是二进制包?有什么特点? 二进制包,指的是已经 1 好了的软件包,只需要直接安装就可以使用。二进制包,不需要编译,直接…

计算机msvcr120.dll文件丢失怎样修复,只需简单3步即可

在使用电脑过程中,我们经常会遇到一些错误提示,其中最常见的就是“缺少某个.dll文件”,“找不到msvcr120.dll文件”。那么,msvcr120.dll文件到底是什么呢?当我们遇到这个问题时应该如何解决呢?本文将详细介…

5252D 5G基站测试仪

01 5252D 5G基站测试仪 产品综述: 5252D多通道综测仪打破了信号发生器进行信号发射、频谱分析仪进行观看频域波形的测试方案,将信号收发融为一体,推动无线通信测试进入全新时代。其独具的多通道收发一体、高性能、全方位测试能力及直观操作…

凯斯西储大学轴承数据解读

文章目录 一、凯斯西储大学轴承数据基础知识?1.1 故障种类1.2 故障点尺寸(单点故障)1.3 载荷和转速 二、数据解读2.1 文件2.2 以12k Drive End Bearing Fault Data为例2.3 以(0.007,inner race)为例。 3 Normal Baseli…

计算机组件操作系统BIOS的相关知识思维导图

🎬 艳艳耶✌️:个人主页 🔥 个人专栏 :《产品经理如何画泳道图&流程图》 ⛺️ 越努力 ,越幸运 目录 一、运维实施工程师需要具备的知识 1、运维工程师、实施工程师是啥? 2、运维工程师、实施工…

whisper深入-语者分离

文章目录 学习目标:如何使用whisper学习内容一:whisper 转文字1.1 使用whisper.load_model()方法下载,加载1.2 使用实例对文件进行转录1.3 实战 学习内容二:语者分离(pyannote.audio)pyannote.audio是huggi…

基于ETM+遥感数据的城市热岛效应现状研究的解决方案

1.引言 城市热岛效应(Urban Heat Island Effect)是指城市中的气温明显高于外围郊区的现象。在近地面温度图上,郊区气温变化很小,而城区则是一个高温区,就像突出海面的岛屿,由于这种岛屿代表高温的城市区域&…

20、清华、杭州医学院等提出:DA-TransUNet,超越TranUNet,深度医学图像分割框架的[皇帝的新装]

前言: 本文由清华电子工程学院、杭州医学院、大阪大学免疫学前沿研究所、日本科学技术高等研究院信息科学学院、东京法政大学计算机与信息科学专业共同作者,于2023年11月14号发表于arXiv的《Electrical Engineering and Systems Science》期刊。 论文&…

MongoDB与大数据处理:构建高性能分布式数据库

MongoDB是一种非关系型数据库,具有高度灵活性和可扩展性。在处理大量数据时,索引的优化是提升查询性能的关键。下面将介绍一些MongoDB索引优化的指南,帮助用户更好地利用索引来提高查询性能。 一、选择适当的索引类型 1、单字段索引&#xf…

Go项目快速集成Swagger UI

swag Swag将Go的注释转换为Swagger2.0文档。我们为流行的 Go Web Framework 创建了各种插件,这样可以与现有Go项目快速集成(使用Swagger UI)。 目录 快速开始支持的Web框架如何与Gin集成格式化说明开发现状声明式注释格式 通用API信息API操…

MySQL实战45讲课后问题

1、第一章 如果表T中没有字段k,而你执行了这个语句 select *fromTwhere k1, 那肯定是会报“不存在这个列”的错误: “Unknown column ‘k’ in ‘where clause’”。你觉得这个错误是在我们上面提到的哪个阶段报出来的呢? 解答:…

网线的制作集线器交换机路由器的配置--含思维导图

🎬 艳艳耶✌️:个人主页 🔥 个人专栏 :《产品经理如何画泳道图&流程图》 ⛺️ 越努力 ,越幸运 一、网线的制作 1、网线的材料有哪些? 网线 网线是一种用于传输数据信号的电缆,广泛应…

学生党评测FreeBuds SE 2,华为最便宜的TWS耳机体验如何?

华为最便宜的百元价位TWS耳机——FreeBuds SE 2值得入手吗?学生党实际使用一个多月,今天从个人主观使用感受来展开说说它的优缺点,如果说你正在观望要不要入手这款耳机,希望可以帮到你。 优点一:超长续航 对于我这种…

JMM的内存可见性保证

Java程序的 内存可见性保证 可以分为下列3类 1)单线程程序 单线程程序不会出现内存可见性问题。 编译器、runtime、处理器会共同确保单线程程序的执行结果与该程序在顺序一致性模型中的执行结果相同。 2)正确同步的多线程程序 Further Reading &…

YOLOv8改进 | 2023注意力篇 | HAttention(HAT)超分辨率重建助力小目标检测 (全网首发)

一、本文介绍 本文给大家带来的改进机制是HAttention注意力机制,混合注意力变换器(HAT)的设计理念是通过融合通道注意力和自注意力机制来提升单图像超分辨率重建的性能。通道注意力关注于识别哪些通道更重要,而自注意力则关注于图…

C : DS二叉排序树之删除

Description 给出一个数据序列,建立二叉排序树,并实现删除功能 对二叉排序树进行中序遍历,可以得到有序的数据序列 Input 第一行输入t,表示有t个数据序列 第二行输入n,表示首个序列包含n个数据 第三行输入n个数据…

cpulimit设计理念及其思考

背景 前几天,同事咨询了我一个问题:IO占用能和cpu使用率那样,有方法来控制吗?这个问题的背景是因为客户提了两个需求,如下: 说实话,针对这两点需求,我的第一反应是有一点思路&#…

PIC单片机项目(5)——基于PIC16F877A的多功能防盗门

1.功能设计 本次设计的功能如下:如果红外对管检测到有人经过,LCD1602可以显示,我设计的是显示字符串“someone”。 如果有人强行破门,FSR402压力传感器会检测到压力过大,然后触发蜂鸣器报警,LCD1602也显示“…

物奇平台消息发收功能实现

物奇平台消息发收功能实现 是否需要申请加入数字音频系统研究开发交流答疑群(课题组)?可加我微信hezkz17, 本群提供音频技术答疑服务,+群赠送语音信号处理降噪算法,蓝牙耳机音频,DSP音频项目核心开发资料, 1 外设中断消息发送方法