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

  • 公司处理固定资产的账务处理
  • 印花税计提时应入什么科目
  • 怎么恢复自然人个人信息
  • 单位购牙膏牙刷卫生纸怎么做账
  • 高档化妆品增值税税率是13%
  • 自产自销农产品企业所得税
  • 填写银行结算凭证的有关印鉴,应集中由谁保管
  • 货运增值税发票抵扣条件
  • 持有至到期投资在资产负债表怎么填
  • 非在职员工是什么意思
  • 以前年度亏损可以在季报弥补吗
  • 混营纳税人怎么申报
  • 对公银行转款备注重要吗
  • 酒店产权式经营业主取得的收入按股利红利所得
  • 已交税金怎么做账
  • 高铁票财务怎么报销
  • 增值税简易征收范围
  • 净利润和毛利润的计算公式
  • 增值税普通发票有什么用
  • 开票人为什么不能改
  • 申请小型微利企业
  • 最新w10系统专业版
  • 森林植被恢复费标准
  • 跟a签订合同可以撤销吗
  • 成本费用包括什么项目
  • php+js
  • 银行退回手续费的账务处理
  • ipssvc.exe - ipssvc是什么进程 有什么作用
  • explorer进程作用
  • 员工自己垫付的费用怎么走账
  • 小规模纳税人怎么申报增值税报表
  • phpget方法
  • 制造业成本核算明细表
  • 实际发放股票股利为什么股本增加
  • js怎么把时间戳转为日期yyyy-mm-dd
  • php redis常用命令
  • 在报税显示缺少税种信息
  • chrome插件开发语言
  • php5魔术方法
  • 房屋租赁费属于什么税收分类编码
  • 建筑劳务税率是13还是6
  • 解决问题对吗
  • 小规模纳税人增值税税率
  • 教育行业有主营业务吗
  • 半成品结转成品会计分录
  • 公司房租只有房东交吗
  • 生育津贴是怎么申请
  • 收政府的慰问金合法吗
  • 销售奖金交税由谁承担
  • 城建税及教育附加税税率是多少
  • 小规模纳税人低值易耗品摊销方法
  • 消费税出口退税吗
  • 电脑开票怎么操作流程
  • 营改增之后账务怎么处理
  • 往来账项询证函怎么填写
  • 生产型企业加计扣除10%
  • 建筑行业小规模纳税人税率1%
  • 哪些账簿可以跨市登记
  • mysql数据库输入汉字是问号
  • 数据库时区与url连接设置的时区
  • win10 更新 蓝屏
  • windowsxp能用pr吗
  • ubuntu20.04 vim
  • ubuntu20.04最小化安装教程
  • Mac如何更换壁纸
  • windowsxp忘了登录密码
  • 丢失msvcr80.dll
  • linux使用yum
  • realmon.exe - realmon是什么进程 有什么用
  • win8.1应用商店无法连接
  • 给网页添加javascript
  • jquery实现搜索功能
  • Node.js中的事件循环是什么意思
  • javascript简明教程
  • js的文件操作
  • python ftp storbinary
  • 国家税务局湖南省电子税务局app下载
  • 河南省医保卡中心电话
  • 电子税务局新户报道怎么弄
  • 非房地产企业土地增值税清算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设