解决useState 异步回调useGetState自定义hooks获取不到最新值

这篇具有很好参考价值的文章主要介绍了解决useState 异步回调useGetState自定义hooks获取不到最新值。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

setState 的两种传参方式

1、直接传入新值 setState(options);

const [state, setState] = useState(0);
setState(state + 1);

2、传入回调函数 setState(callBack);

const [state, setState] = useState(0);
setState((prevState) => prevState + 1); // prevState 是改变之前的 state 值,return 返回的值会作为新状态覆盖 state 值

useState 异步回调获取不到最新值及解决方案

通常情况下 setState 直接使用上述第一种方式传参即可,但在一些特殊情况下第一种方式会出现异常; 例如希望在异步回调或闭包中获取最新状态并设置状态,此时第一种方式获取的状态不是实时的,React 官方文档提到:组件内部的任何函数,包括事件处理函数和 Effect,都是从它被创建的那次渲染中被「看到」的,所以引用的值任然是旧的,最后导致 setState 出现异常:文章来源地址https://www.toymoban.com/news/detail-464283.html

import React, { useState, useEffect } from 'react';

const App = () => {
  const [arr, setArr] = useState([0]);

  useEffect(() => {
    console.log(arr);
  }, [arr]

到了这里,关于解决useState 异步回调useGetState自定义hooks获取不到最新值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React hooks文档笔记(五)useEffect——解决异步操作竞争问题

    非bug,重新安装组件仅在开发过程中发生,帮助找到需要清理的效果。在生产环境中只会加载一次。 React 将在 Effect 下次运行之前以及卸载期间调用您的清理函数。 return () = {}; 在开发中, Effect call addEventListener() ,然后立即call removeEventListener() ,然后再次cal laddEventListener()

    2024年02月11日
    浏览(45)
  • 02react 函数组件useState的异步问题

    常见的钩子函数:useState、useEffect useState作为最常见的一个hook,在使用中总是会出现各种坑,最明显的就是 useState 更新异步的问题。 问题描述:把接口返回的数据,使用 useState 储存起来,但是当后面去改变这个数据的时候,每次拿到的都是上次的数据,无法实时更新。或者

    2024年02月03日
    浏览(48)
  • 巧用回调函数解决微信小程序与后台数据交互出现的异步问题

            微信小程序端需要发送一个包含文字与图片的表单数据给后端,我一开始的思路是 先 上传图片得到临时的URL, 后 执行POST请求将表单数据发送给后端,但后端只能获取到文字,而图片URL却始终获取不到。         注意看我上面的思路, 一先一后 ,无形中将两

    2024年02月16日
    浏览(44)
  • react如何处理setState,useState异步问题

    flushSync 是 React 提供的一种实验性的 API,用于控制 React 更新的同步/异步方式,并且只能在 React 16 及更高版本中使用。使用 flushSync 可以强制 React 在执行一些特定的 DOM 操作时,同步地(而非异步地)执行分块更新,从而保证消息优先级和交互响应性能。 通常情况下,React 采

    2024年02月11日
    浏览(46)
  • 解决ios在公众号获取不到发票抬头回调的问题

    其实这个问题很简单,因为微信很多东西不方便直接调试,我们就习惯性的alert一下,然后选择了发票抬头后---安卓可以alert我们选择的数据,可是ios却什么也没有,其实造成这个是因为alert在ios被屏蔽了不回弹出,所以我们看不到任何alert,浪费了我们大把时间,哈哈哈。h5公

    2024年02月15日
    浏览(45)
  • CompletableFuture异步回调

    CompletableFuture简介 CompletableFuture被用于异步编程,异步通常意味着非阻塞,可以使得任务单独允许在与主线程分离的其他线程中,并且通过回调可以在主线程中得到异步任务的执行状态,是否完成,和是否异常信息。 CompletableFuture实现了Future,CompletionStage接口,实现了Future接

    2024年02月05日
    浏览(36)
  • Java 异步回调

    在Java中, 通常需要使用异步方法来执行一些耗时的操作 ,例如网络请求、文件读写等。异步方法的执行是非阻塞的,即异步方法的执行不会阻塞当前线程,而是会在后台线程中执行。因此,异步方法执行完成后,需要将执行结果返回给调用者,以便调用者进行后续的处理。

    2024年02月16日
    浏览(39)
  • lua实现http的异步回调

    想用lua实现与http服务器的通信,请求一些数据会回来,默认lua.socket.http是同步的,所以想弄一个异步的方式 lua 5.1 以下是同步的代码,其中http.request会被阻塞住的 输出结果: 如果每次执行一次请求,就卡住我们逻辑的Tick,那整个客户端就卡在那里了。所以,我需要非阻塞的

    2024年02月13日
    浏览(31)
  • JAVA的回调机制、同步/异步调用

    同步调用是最基本的调用方式。类A的a()方法调用类B的b()方法, 类A的方法需要等到B类的方法执行完成才会继续执行 。如果B的方法长时间阻塞,就会导致A类方法无法正常执行下去。 如果A调用B,B的执行时间比较长,那么就需要考虑进行异步处理,使得B的执行不影响A。通常

    2024年02月14日
    浏览(39)
  • kafka生产者异步发送、同步发送、回调异步发送,是什么情况?

    Kafka是一种分布式流处理平台 ,它是一种高吞吐量、可扩展、可持久化的消息队列系统,用于处理和存储实时流式数据。 Kafka基于发布-订阅模式,采用了分布式、多副本、分区的架构。它允许生产者将数据以消息的形式发送到Kafka集群的一个或多个主题(topic)中,而消费者可以

    2024年02月15日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包