位置: IT常识 - 正文

React hooks中 useState踩坑-=--异步问题

编辑:rootadmin
React hooks中 useState踩坑-=--异步问题

推荐整理分享React hooks中 useState踩坑-=--异步问题,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

useState作为最常见的一个hook,在使用中总是会出现各种坑,最明显的就是 useState 更新异步的问题。

比如我们把接口返回的数据,使用 useState 储存起来,但是当后面去改变这个数据的时候,每次拿到的都是上次的数据,无法实时更新。

React hooks中 useState踩坑-=--异步问题

或者我们在函数内部使用 setState ,然后立即打印 state,打印的结果还是第一次的state 的值。比如下面的代码实例。

const [data, setData] = useState('111'); const handleTest = () => { console.log(data) // 111 setName('222') console.log(name) // 111 }原因:

useState 返回的更新对象的方法是异步的,要在下次重绘才能获取新值,不要试图在更改状态之后立即获取状态。

1. useState 使用的两种方式

我们知道,useState中的 [ ] 是一个解构运算,第一个是设置的值,第二个是用来改变 state 的方法。

1. 直接传入新值const [data, setData] = useState(1)setData(data + 1)2. 传入回调函数 setState(callback)const [data, setData] = useState(0)setData((prev) => prev + 1); // prev 是data 改变之前的值,return 返回的值会作为新状态覆盖data

一般情况下,我们使用第一种方式即可,但在某些特殊情况下,第一种方式获取到的值不是最新设置的。

2. 解决方案2.1 使用 useRef

思路:先使用 useRef 进行存储数据,再使用 useEffect 监听数据变化,并进行更新。

import React, { useState, useEffect, useRef } from 'react';const Index = () => {const [info, setInfo] = useState()const infoRef = useRef()useEffect(() => {infoRef.current = info}, [info])}

在之后需要使用 info 数据的地方只需要获取 infoRef.current 即可获取最新的 info 数据内容。

2.2 使用回调函数更改数据const [data, setData] = useState({a: 1})setData((prev) => {return {a: prev.a + 1}})
本文链接地址:https://www.jiuchutong.com/zhishi/290733.html 转载请保留说明!

上一篇:瓦尔加迪纳的日落,意大利南蒂罗尔多洛米蒂山脉 (© Marco Capellari/Getty Images)(瓦尔加德)

下一篇:idea的vue文件中使用ElementUi组件(idea打开vue文件)

  • 苹果13promax怎么截图(苹果13promax怎么关机)

    苹果13promax怎么截图(苹果13promax怎么关机)

  • 优酷怎么将喜欢的视频分享给好友(优酷怎么将喜欢视频删除)

    优酷怎么将喜欢的视频分享给好友(优酷怎么将喜欢视频删除)

  • 苹果live照片怎么保存到电脑(苹果live照片怎么导出保存)

    苹果live照片怎么保存到电脑(苹果live照片怎么导出保存)

  • 小爱音箱怎么控制普通家电(小爱音箱怎么控制小米电视)

    小爱音箱怎么控制普通家电(小爱音箱怎么控制小米电视)

  • 不是原装的数据线对充电有影响吗(不是原装的数据线充电好慢)

    不是原装的数据线对充电有影响吗(不是原装的数据线充电好慢)

  • 腾讯视频积分怎么获得(腾讯视频积分怎么用)

    腾讯视频积分怎么获得(腾讯视频积分怎么用)

  • 华为荣耀20是不是双卡(华为荣耀20是不是双卡双待)

    华为荣耀20是不是双卡(华为荣耀20是不是双卡双待)

  • 钉钉直播投屏到电视计入时长吗(钉钉直播投屏到电视没有声音)

    钉钉直播投屏到电视计入时长吗(钉钉直播投屏到电视没有声音)

  • 钉钉会监视手机隐私吗(钉钉会监视手机的信息吗)

    钉钉会监视手机隐私吗(钉钉会监视手机的信息吗)

  • 红米k305g对比k20pro的区别(红米k30和k20pro参数对比)

    红米k305g对比k20pro的区别(红米k30和k20pro参数对比)

  • 哪款ipad可以打电话(哪款iPad可以打电话)

    哪款ipad可以打电话(哪款iPad可以打电话)

  • qq忙碌状态是对全部人吗(qq忙碌状态是对方在忙吗)

    qq忙碌状态是对全部人吗(qq忙碌状态是对方在忙吗)

  • 交换机工作在osi的什么层(交换机工作在OSI的哪一层)

    交换机工作在osi的什么层(交换机工作在OSI的哪一层)

  • 停机是欠费吗(手机号码状态查询)

    停机是欠费吗(手机号码状态查询)

  • 苹果11信号有提升吗(苹果11手机信号)

    苹果11信号有提升吗(苹果11手机信号)

  • 手机怎么清空输入法记忆(手机怎么清空输入法常用词)

    手机怎么清空输入法记忆(手机怎么清空输入法常用词)

  • 国家助学金什么时候发(国家助学金什么时候发放2023上半年)

    国家助学金什么时候发(国家助学金什么时候发放2023上半年)

  • 酷我音乐怎么录歌(酷我音乐怎么录音发到微信上)

    酷我音乐怎么录歌(酷我音乐怎么录音发到微信上)

  • 微信群头像可以设置吗(微信群头像可以改吗)

    微信群头像可以设置吗(微信群头像可以改吗)

  • iphone6s能升级12.4吗(iphone6s能升级到ios15吗)

    iphone6s能升级12.4吗(iphone6s能升级到ios15吗)

  • 电脑变成黑白怎么处理(电脑变成黑白怎么调回彩色)

    电脑变成黑白怎么处理(电脑变成黑白怎么调回彩色)

  • 华为手机怎么删除界面新闻(华为手机怎么删除内存清理)

    华为手机怎么删除界面新闻(华为手机怎么删除内存清理)

  • python max函数怎么用(python中max函数的几种用法)

    python max函数怎么用(python中max函数的几种用法)

  • 个税汇缴常见问题
  • 交车辆购置税会计账务处理
  • 经营所得和企业所得
  • 预收账款确认收入
  • 个人微信转账可以认定劳动关系吗
  • 存货售出后是否含税
  • 注册资本需要实交吗
  • 印花税销售额的多少
  • 住房公积金个人和单位各承担多少
  • 货车压线行驶怎么处罚
  • 合法有效的凭证
  • 合同违约金账务处理
  • 在途物资可以结转成本吗
  • 应交税费明细科目设置
  • 个体工商户怎么交社保
  • 预缴增值税预缴的城建税怎么申报
  • 职工福利增值税的处理
  • 减免附加税的账户有哪些
  • 小微企业计算公式
  • 纳税人必须先复议再诉讼
  • 采购成本包括哪两种
  • 拆迁公司属于什么性质
  • 餐饮调理产品有哪些
  • 股票质押得到的钱怎么算
  • 网络适配器不见了win7.上不了网了
  • Win11 Dev Build 22000.65开发预览版推送(附更新修复已知问题汇总)
  • 辞退补偿金怎么算n1吗
  • win11笔记本如何让电池充电到100%
  • 房地产评估费计算公式
  • 废旧物资销售收入
  • 公允价值变动损益借贷方向增减
  • 债转股税收优惠政策
  • 城市赚钱项目
  • 在建工程账务处理管理制度
  • DeepLabV3+:Mobilenetv2的改进以及浅层特征和深层特征的融合
  • 应收账款的定义和特点
  • 账面价值大于计税基础为啥为递延所得税负债
  • laravel入门与实战:构建主流php应用开发框架
  • flexbuffers
  • php access_token
  • thinkphp跨域请求
  • 微服务框架图
  • 注册公司冠名省需要多少注册资金
  • 资产减值损失属于营业外支出吗
  • 预付款能不能开票入账
  • 2021年股权变更要怎么办理?
  • 投资性房地产成本模式转公允模式差额
  • 委托加工应税消费品收回后直接销售
  • 公司向个人借款怎么做账
  • 通用机打的发票
  • 春节补贴是正数还是负数
  • 房屋维修基金帐户处理办法
  • 股权转让需要出资吗
  • 税控系统技术维护费会计处理
  • 应纳税工资是应发还是实发
  • 固定资产如何管理
  • 企业内账怎么做
  • mysql jdbc
  • mysql优化十大技巧
  • mysql数据库设置固定值
  • windows怎么用
  • win8 开机
  • xp系统打开注册表
  • 自制简易手工
  • bios设置网卡开启
  • windows8使用教程
  • sbdrvdet.exe - sbdrvdet是什么进程 有什么用
  • magento开发教程
  • bootstrap模态窗口
  • material design设计
  • opengl es 2.0是什么
  • Node.js中的construct构造函数
  • 不是批处理文件
  • 贝塞尔曲线生成器
  • js右键菜单
  • Python装饰器入门学习教程(九步学习)
  • unity的invoke
  • u3d地形编辑贴图
  • js 队列
  • 如何理性看待出轨
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设