位置: 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文件)

  • iPhone11是支持防抖的吗(苹果11防)

    iPhone11是支持防抖的吗(苹果11防)

  • 华为nova7如何取消抬起亮屏(华为nova7如何取消锁屏壁纸图片)

    华为nova7如何取消抬起亮屏(华为nova7如何取消锁屏壁纸图片)

  • 淘宝工单是什么意思(淘宝工单是怎么出现的)

    淘宝工单是什么意思(淘宝工单是怎么出现的)

  • oppo手机掉水里了没声音怎么办(oppo手机掉水里还能用吗)

    oppo手机掉水里了没声音怎么办(oppo手机掉水里还能用吗)

  • 联想小新无法连接网络(联想小新无法连接校园网)

    联想小新无法连接网络(联想小新无法连接校园网)

  • mini4什么时候上市的(mini4刚上市多少钱)

    mini4什么时候上市的(mini4刚上市多少钱)

  • 拼多多一个人可以开几个店铺(拼多多一个人可以助力同一个人两次吗)

    拼多多一个人可以开几个店铺(拼多多一个人可以助力同一个人两次吗)

  • 华为p30pro充电变慢了是怎么回事(华为p30手机充电突然变慢怎么回事)

    华为p30pro充电变慢了是怎么回事(华为p30手机充电突然变慢怎么回事)

  • 企业微信直播黑屏怎么回事(企业微信直播黑屏)

    企业微信直播黑屏怎么回事(企业微信直播黑屏)

  • iwatch死机怎么重启(iwatch开机卡住)

    iwatch死机怎么重启(iwatch开机卡住)

  • 苹果11前面的呼吸灯怎么闪烁(苹果11前面呼吸灯)

    苹果11前面的呼吸灯怎么闪烁(苹果11前面呼吸灯)

  • 小米盒子需要连接网线吗(小米盒子需要连网吗)

    小米盒子需要连接网线吗(小米盒子需要连网吗)

  • 苹果11指纹解锁(苹果11指纹解锁在哪里)

    苹果11指纹解锁(苹果11指纹解锁在哪里)

  • 华为移动版和全网通怎么区分(华为移动版和全网版区别)

    华为移动版和全网通怎么区分(华为移动版和全网版区别)

  • 电动空调和自动空调的区别(电动空调自动停怎么回事)

    电动空调和自动空调的区别(电动空调自动停怎么回事)

  • 2.4g和5g要不要合并

    2.4g和5g要不要合并

  • 6s怎么用不了8的耳机(为什么6s能用这么久)

    6s怎么用不了8的耳机(为什么6s能用这么久)

  • 手机屏幕发白是什么原因(手机屏幕发白是什么问题)

    手机屏幕发白是什么原因(手机屏幕发白是什么问题)

  • 高清播放器能播放dvd光盘吗(高清播放器播放图片时被拉伸变形)

    高清播放器能播放dvd光盘吗(高清播放器播放图片时被拉伸变形)

  • ipad的保修是多久(ipad的保修政策)

    ipad的保修是多久(ipad的保修政策)

  • ip层的作用包括哪些(ip层的功能有哪些)

    ip层的作用包括哪些(ip层的功能有哪些)

  • ipad可以添加应用锁吗(ipad上怎么给app加应用锁)

    ipad可以添加应用锁吗(ipad上怎么给app加应用锁)

  • set与ssl有何区别(ssl,set区别)

    set与ssl有何区别(ssl,set区别)

  • windows8.1升级win10(windows8.1升级win10有必要吗)

    windows8.1升级win10(windows8.1升级win10有必要吗)

  • 微信扫码付款后能联系到对方吗(微信扫码付款后怎么加对方好友)

    微信扫码付款后能联系到对方吗(微信扫码付款后怎么加对方好友)

  • 苹果7找不到访问限制(苹果7找不到访问限制怎么办)

    苹果7找不到访问限制(苹果7找不到访问限制怎么办)

  • win10怎么保存锁屏壁纸(怎么保存win10锁屏界面)

    win10怎么保存锁屏壁纸(怎么保存win10锁屏界面)

  • 手把手教你实现一个JavaWeb项目:创建一个自己的网页博客系统(前端+后端)(一)(手把手教你实现用户登录界)

    手把手教你实现一个JavaWeb项目:创建一个自己的网页博客系统(前端+后端)(一)(手把手教你实现用户登录界)

  • “export ‘default‘ (imported as ‘VueRouter‘) was not found in ‘vue-router‘报错分析(defaultpool)

    “export ‘default‘ (imported as ‘VueRouter‘) was not found in ‘vue-router‘报错分析(defaultpool)

  • IndexError: invalid index of a 0-dim tensor. Use `tensor.item()` in Python

    IndexError: invalid index of a 0-dim tensor. Use `tensor.item()` in Python

  • 递延所得税资产会计处理全过程
  • 一般纳税人做账流程图
  • 小微企业税收优惠政策2023年
  • 事业单位长期股权投资持有期间被投资单位
  • 含税金额和开票金额
  • 微信支付属于现金嘛
  • 企业年报社保都是0人的公司
  • 增值税发票丢了怎么办?
  • 未取得发票如何进应付暂估科目
  • 工会经费支出无效怎么办
  • 分期手术
  • 亏本销售商品如何做其会计分录?
  • 增值税转售行为怎么做会计处理?
  • 报销发票财务一旦作废报销人可以收回吗?
  • 1697509246
  • 如何申请残疾人
  • 不动产抵押登记费记什么科目
  • 深度操作系统的窗口管理器
  • 在windows7中,使用鼠标拖放功能
  • 初级会计实务的心得体会
  • windows已禁用
  • PHP:oci_new_descriptor()的用法_Oracle函数
  • php封装接口
  • 任务管理器无法完成操作拒绝访问
  • 关于已开发票收到部分款项风险温馨提示
  • 公司现金用途
  • 工业企业采购部门职责
  • 结转本月收入类账户到本年利润
  • 什么是所得税收入
  • 销售产品取得收入
  • laravel insert ignore
  • nginx配置tp5
  • 一年一度的施瓦本哈尔圣诞市集,德国巴登-符腾堡州 (© sack/Getty Images Plus)
  • 财务费用的核算属于什么业务
  • thinkphp3.x中session方法的用法分析
  • html文档基本结构包括哪几部分
  • 激活函数总结
  • 如何查询发票领到几月份了
  • mysql redo log buffer
  • 保障金纳入地方财政吗
  • 古腾堡中文官网
  • 交物业的发票有用吗
  • 利润表和资产负债表
  • 交税交多了如何申请退税
  • 外聘专家机票能抵扣增值税吗
  • 增值税发票系统客服电话
  • 新成立的公司如何注销
  • 加油充值卡能报销吗
  • 建筑劳务公司的账务处理流程
  • 其他收益和其他综合收益属于什么科目
  • 出口货物退货的原因
  • mysql参数表
  • sql2008数据库置疑
  • sql中存储过程的用法
  • server core安装完成后按什么进行登录
  • windows windows.old
  • windows server 2016 百度网盘下载
  • saimon.exe - saimon进程有什么用 有何作用
  • win8安全和维护在哪
  • unity加密解决方案
  • unity双击
  • android获取json数据
  • cocos2dx-js
  • unity3d的
  • jquery控制滚动条位置
  • javascript parseInt 函数分析(转)
  • jquery教程 csdn
  • 使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
  • 猫的喵喵
  • 关于怀孕在线咨询
  • jquery单选框
  • jquery改变img的src
  • android图片压缩到200-300kb
  • pythontrutle
  • 开票系统开不了票
  • 党建服务中心属于哪个区
  • 三证合一后还有税务登记证吗?
  • 税收制度的核心是税法
  • 税务师报考条件和时间2021湖北
  • 微山湖到底属于哪里
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设