React hooks useState异步问题及解决

目录
  • React Hooks useState异步问题
    • 原因
    • 解决方法
  • React中useState异步更新小坑
    • 问题点

React Hooks useState异步问题

最近在开发中遇到一个问题 我接口请求回来的数据 用useState存储起来。

但是我后面 去改变这个数据的时候每次拿到都是上次的数据没办法及时更新。

原因

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

解决方法

应该使用useRef 存储这个数据,在useEffect里监听data的变化

const dataRef = useRef()
const [data,setData] = useState[{}]
useEffect(() => {
     dataRef.current =   data
}, [data])

当我们想使用当前的数据的时候直接用dataRef.current 获取的就是当前最新的数据

console.log(dataRef.current)//最新的数据

React中useState异步更新小坑

问题：

在hooks中,修改状态的是通过useState返回的修改函数实现的.它的功能类似于class组件中的this.setState().而且,这两种方式都是异步的.可是this.setState()是有回调函数的,那useState()呢?

问题点

它异步且没有回调函数

const [count,setCount] = useState(1)
useEffect(()=> {
    setCount(2,()=>{
      console.log('测试hooks的回调');
    })
    console.log(count);
  },[])

可以看到提示 “State updates from the useState() and useReducer() Hooks don’t support the second callback argument. To execute a side effect after rendering, declare it in the component body with useEffect().”

是不支持回调函数的形式的。因为setCount是异步的，所以打印count是在改变count之前的。

如果我们想要在打印的时候就拿到最新的值，那么我们可以通过setCount的第二个参数指定依赖项

const [count,setCount] = useState(1)
useEffect(()=> {
    setCount(2)
    console.log(count);
  },[count])

当count发生变化的时候,useEffect就会再次相应,但是这样就会有个问题,当count从1变为2的时候useEffect的回调函数会再次执行，就会分别打印1,2两次。

  useEffect(()=> {
    let currentValue = null
      setCount((preVal)=>{
        currentValue=preVal
        return 2
      })
      if(currentValue!==count){
        console.log(count);
      }
    },[count])

通过添加判断条件，我们可以让想要执行的代码只执行一次

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解React hooks组件通信方法

    详解React hooks组件通信方法

    目录 一.前言 二.父子组件通信 1)父组件传值给子组件 2)子组件传值给父组件 3)跨组件传值(父传孙子组件) 一.前言 组件通信是React中的一个重要的知识点,下面列举一下 react hooks中常用的父子.跨组件通信的方法 二.父子组件通信 1)父组件传值给子组件 子组件代码: //子组件 const Child = ({ param1, param2 }) => { return <>父组件传递的参数:{param1},{param2}</> } param1.p

  • 进入Hooks时代写出高质量react及vue组件详解

    进入Hooks时代写出高质量react及vue组件详解

    目录 概述 1.组件什么时候拆?怎么拆? 2.如何组织拆分出的组件文件? 3.如何用hooks抽离组件逻辑? 题外话:全局状态的管理 概述 vue和react都已经全面进入了hooks时代(在vue中也称为组合式api,为了方便后面统一称为hooks),然而受到以前react中类组件和vue2写法的影响,很多开发者都不能及时转换过来,以致于开发出一堆面条式代码,整体的代码质量反而不如改版以前了. hooks组件到底应该如何写,我也曾为此迷惘过一段时间.特别我以前以react开发居多,但在转到新岗

  • react hooks闭包陷阱切入浅谈

    react hooks闭包陷阱切入浅谈

    目录 引言 1.一个熟悉的闭包场景 2 浅谈hooks原理,理解useEffect 的 “闭包陷阱” 出现原因 2 难道真的要在依赖数组里写上的值,才能拿到新鲜的值? 3 为什么使用useRef能够每次拿到新鲜的值? 4 完毕 引言 首先,本文并不会讲解 hooks 的基本用法, 本文从 一个hooks中 “奇怪”(其实符合逻辑) 的 “闭包陷阱” 的场景切入,试图讲清楚其背后的因果.同时,在许多 react hooks 奇技淫巧的文章里,也能看到 useRef 的身影,那么为什么使用 useR

  • React中的Hooks进阶理解教程

    目录 Hooks进阶 useState - 回调函数的参数 useEffect - 清理副作用 useEffect - 发送网络请求 useRef useContext Hooks进阶 useState - 回调函数的参数 使用场景 参数只会在组件的初始渲染中起作用,后续渲染时会被忽略.如果初始 state 需要通过计算才能获得,则可以传入一个函数,在函数中计算并返回初始的 state,此函数只在初始渲染时被调用 语法 const [name, setName] = useState(()=>{

  • React-hooks中的useEffect使用步骤

    目录 1.理解函数副作用 什么是副作用? 常见的副作用 2.基础使用 使用步骤 示例代码 3.依赖项控制 useEffect 永远是在 DOM渲染完成之后执行 1.理解函数副作用 什么是副作用? 对于React组件来说,主作用是根据数据(state/props)渲染UI,除此之外都是副作用(比如手动修改DOM.发送ajax请求). 常见的副作用 数据请求(发送ajax) 手动修改 DOM localstorage操作 useEffect 函数的作用就是为react函数组件提供副作用 2.基础使用

  • 三分钟搞懂react-hooks及实例代码

    三分钟搞懂react-hooks及实例代码

    目录 背景 useState 类组件 函数组件 多状态声明 useEffect 类组件中componentDidMount和componentDidUpdate useEffect模拟类组件中componentDidMount和componentDidUpdate useEffect实现componmentWillUnment 父子组件传值useContext useReducer 背景 介绍Hooks之前,首先要说一下React的组件创建方式,一种是类组件,一种是纯函数组件,并且React团队

  • React Hooks钩子中API的使用示例分析

    目录 hooks是什么 Hooks的作用 使用Hooks组件前后开发模式的对比 Hooks使用策略 为什么要有Hooks useState useEffect使用 useEffect依赖项 使用情景 useMemo使用 useMemo缓存组件方式 useMemo和useEffect的区别 useCallback使用 useContext使用 useRef使用 为什么在函数组件中无法使用ref 如何在类组件中使用ref属性 自定义hooks hooks是什么 hooks理解字面意思就是钩子,是一些

  • Jetpack Compose对比React Hooks API相似度

    Jetpack Compose对比React Hooks API相似度

    目录 React Component vs Composable JSX vs DSL loop If statement key component Children Prop vs Children Composable Context vs Ambient(CompositionLocal) createContext : ambientOf Provider : Provider useContext : Ambient.current useState vs State useMemo

  • 使用 React Hooks 重构类组件的示例详解

    目录 1. 管理和更新组件状态 2. 状态更新后的操作 3. 获取数据 4. 卸载组件时清理副作用 5.  防止组件重新渲染 6. Context API 7. 跨重新渲染保留值 8. 如何向父组件传递状态和方法? 9. 小结 最初,在 React 中可以使用 createClass 来创建组件,后来被类组件所取代.在 React 16.8 版本中,新增的 Hooks 功能彻底改变了我们编写 React 程序的方式,使用 Hooks 可以编写更简洁.更清晰的代码,并为创建可重用的有状态逻辑提供了

  • React hooks useState异步问题及解决

    React hooks useState异步问题及解决

    目录 React Hooks useState异步问题 原因 解决方法 React中useState异步更新小坑 问题点 React Hooks useState异步问题 最近在开发中遇到一个问题 我接口请求回来的数据 用useState存储起来. 但是我后面 去改变这个数据的时候每次拿到都是上次的数据没办法及时更新. 原因 useState 返回的更新状态方法是异步的,要在下次重绘才能获取新值.不要试图在更改状态之后立马获取状态. 解决方法 应该使用useRef 存储这个数据,在useEffe

  • React Hooks 实现和由来以及解决的问题详解

    与React类组件相比,React函数式组件究竟有何不同? 一般的回答都是: 类组件比函数式组件多了更多的特性,比如 state,那如果有 Hooks 之后呢? 函数组件性能比类组件好,但是在现代浏览器中,闭包和类的原始性能只有在极端场景下才会有明显的差别. 性能主要取决于代码的作用,而不是选择函数式还是类组件.尽管优化策略有差别,但性能差异可以忽略不计. 参考官网:(https://zh-hans.reactjs.org/docs/hooks-faq.html#are-hooks-slow-b

  • 基于react hooks,zarm组件库配置开发h5表单页面的实例代码

    基于react hooks,zarm组件库配置开发h5表单页面的实例代码

    最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方式显示 , 所以一开始就考虑封装一个配置化的页面生成方案,目前已经有多个项目基于此方式配置开发上线,思路和实现分享一下. 使用场景 任意包含表单的h5页面(使用zarm库,或自行适配自己的库) 目标 代码实现简单和简洁 基于配置 新手上手快,无学习成本 老手易扩展和维护 写之前参考了市面上的一些方案

  • 解决react中useState状态异步更新的问题

    解决react中useState状态异步更新的问题

    目录 疑惑 状态异步更新带来的问题 问题示例 问题解决 类组件的解决方案 函数组件的解决方案 其他解决方案 结尾 疑惑 相信刚开始使用react函数组件的小伙伴也遇到过一个坑,就是 useState 更新状态是异步更新的,但是react 并没有提供关于这个问题的解决方案.那我们能否使用自己的方法来解决这个问题呢?答案肯定是可以的. 状态异步更新带来的问题 就拿一个比较常见的场景来说.在react项目中,我们想在关闭对话框后再去处理其他业务.但是 useState 的状态是异步更新的.我们通过se

  • react中使用usestate踩坑及解决

    react中使用usestate踩坑及解决

    目录 usestate的常规用法 useState遇到的坑 1.useState不适合复杂对象的更改 2.useState异步回调的问题 3.根据hook的规则,使用useState的位置有限制 4.使用useState,回调函数形式更改数据 5.useState存入的值只是该值的引用(引用类型) 6.useState,如果保存引用数据,useEffect检测不到变化? 7.useState无法保存一个函数 useState实现原理 usestate的常规用法 在react框架中,不适用类组件,

  • react函数组件useState异步,数据不能及时获取到的问题

    react函数组件useState异步,数据不能及时获取到的问题

    目录 react useState异步,数据不能获取到 问题 解决方法一 react中useState的使用及注意事项 基本使用 注意事项 react useState异步,数据不能获取到 useState() 属于异步函数,在useState() 第一次存储的时候,值会存储不上 因为react中state的更新是异步的,我们setState后,react不会立刻对值进行改变,而是将其暂时放入pedding队列中.react会合并多个state,然后值render一次,所以不要在循环中使用use

  • React hook 'useState' is called conditionally报错解决

    目录 总览 顶层调用 总览 当我们有条件地使用useState钩子时,或者在一个可能有返回值的条件之后,会产生"React hook 'useState' is called conditionally"错误.为了解决该错误,将所有React钩子移到任何可能油返回值的条件之上. 这里有个例子用来展示错误是如何发生的. import React, {useState} from 'react'; export default function App() { const [count,

  • 解决React hook 'useState' cannot be called in a class component报错

    目录 总览 函数组件 类组件中使用setState() 总览 当我们尝试在类组件中使用useState 钩子时,会产生"React hook 'useState' cannot be called in a class component"错误.为了解决该错误,请将类组件转换为函数组件.因为钩子不能在类组件中使用. 这里有个例子用来展示错误是如何发生的. // App.js import {useState, useEffect} from 'react'; class Example

  • 30分钟精通React今年最劲爆的新特性——React Hooks

    你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗? --拥有了Hooks,生命周期钩子函数可以先丢一边了. 你在还在为组件中的this指向而晕头转向吗? --既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this. 这样看来,说React Hooks是今年最劲爆的新特性真的毫不夸张.如果你也对react

  • React Hooks的深入理解与使用

    React Hooks的深入理解与使用

    你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗? --拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function. 你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗? --拥有了Hooks,生命周期钩子函数可以先丢一边了. 你在还在为组件中的this指向而晕头转向吗? --既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this. 这样看来,说React Hooks是今年最劲爆的新特性真的毫不夸张.如果你也对react

随机推荐