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

  • 购进农产品的进项税额是9还是10
  • 偷税漏税逃税是什么意思
  • 工资加计扣除时间怎么填
  • 汽车租赁企业
  • 收到失业金返还什么意思
  • 个税申报赡养老人只能填一个吗
  • 一个季度30万是不含税吗
  • 利润表的未分配利润是哪个
  • 有税控盘怎么领发票
  • 会计分录借贷符号
  • 离职人员个税申报如何处理
  • 企业年报社保都是0人的公司
  • 银行回单日期晚于做账日期
  • 小企业会计准则和企业会计准则的区别
  • 企业合并的相关税费计入哪里
  • 电影院场地出租价格
  • 技术服务行业分析
  • 人力资源外包公司排名
  • 不动产评估需要明确的基本事项包括哪些内容
  • 工会发放员工福利的通知
  • 房地产企业所得税预缴
  • 水资源税计入会计科目
  • 免抵退税的范围
  • 采购发票主要包括什么可以根据什么单据流转生成
  • 查补以前年度房产税的账务处理
  • 进口免费赠送报成了一般贸易
  • win7宽带连接错误651
  • svchost程序错误怎么修复
  • scm wms
  • PHP:Memcached::getMulti()的用法_Memcached类
  • ati2sgag.exe进程安全吗 ati2sgag进程信息查询
  • thinkphp 5.0.24 rce
  • PHP:mcrypt_decrypt()的用法_Mcrypt函数
  • 部门活动经费怎么算
  • 对外长期投资会计分录
  • php canal
  • php生成条形码的代码
  • uni-app打包h5
  • 通往海滩的木板有什么用
  • yolov5输出参数
  • id3决策树伪代码
  • 增值税进项税加计抵减
  • 抄税前要做什么
  • 织梦模板安装完整教程
  • 帝度官网 说明书
  • 领取定额备用金的会计分录
  • sql server基本
  • sqlserver聚集函数
  • 金税盘维护费发票
  • 征税小规模纳税申报
  • 企业开办期间账务处理
  • 土地免缴土地使用税
  • 应收账款全额计提的条件
  • 如何进行捐款活动
  • 行政单位基建账并入大账规定
  • 收到残保金退税现金流
  • 一般纳税人金税盘分录
  • 白条可以入账吗?
  • 日用品办公用品的经营范围
  • 增值税发票虚开补税原来入库的材料处理?
  • 财政授权支付的概念
  • 工会经费应计入
  • 小规模销售免税产品需要交税吗
  • 会计基础知识归纳大全
  • 远程登陆服务器命令
  • vcspawn.exe
  • linux里find命令
  • macbook备份数据
  • win7打开游戏显示已停止工作
  • win10虚拟机不能使用
  • [置顶]电影名字《收件人不详》
  • 深入解析抑郁症:什么是它的表现?别小看它的危害程度!
  • 12个超实用的JQuery代码片段
  • Node.js中的事件循环是什么样的
  • 详细解读退役军人优待政策
  • jquery插件使用教程
  • jquery动态
  • jQuery simplePage+AJAX plus分页插件用法实例
  • 安卓启动器修改
  • 智能财税是什么行业
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设