首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >React记忆异步回调中的值

React记忆异步回调中的值
EN

Stack Overflow用户
提问于 2021-04-07 17:58:59
回答 1查看 54关注 0票数 3

React意外地保留了由React.useState(...)生成的变量的旧值。我按下按钮1,然后按2。3000毫秒后,我希望在警报消息中看到"null",但仍然看到"42"。将handleDisplay封装到依赖于[val]React.useCallback中无济于事。

代码语言:javascript
运行
AI代码解释
复制
function App() {
    const [val, setVal] = React.useState(42)

    const handleHide = () => {
        setVal(null)
    }

    const handleDisplay = () => {
        setTimeout(() => {
            alert(val)
        }, 3000)
    }

    return (
        <div>
            <p>VAL: {val ? val : 'null'}</p>
            <button onClick={handleDisplay}>[1] display value with delay</button>
            <button onClick={handleHide}>[2] hide immediately</button>
        </div>
    )
}

同时,页面上的值(通过VAL: { val ? val : 'null' }呈现)是正确的,它如预期的那样是"null"。关于我做错了什么,以及如何在我的alert(...)中获取"null"

附注:这里是一个沙箱,其中包含一个实时示例https://codesandbox.io/s/react-usestate-bug-24ijj

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-07 18:32:43

在第一次渲染时,val只是一个值为42的常量数字,永远不会更改。这是单击按钮1时传递给setTimeout的值。在3秒内单击按钮2将导致新渲染,其中val的新实例具有值null,但这不会影响第一次渲染中绑定的值。您可能希望阅读有关useEffect钩子的内容。丹·阿布拉莫夫在这里有一篇很棒但很长的文章,只提到了这个问题:https://overreacted.io/a-complete-guide-to-useeffect/

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66991645

复制
相关文章
java 中的异步回调
异步回调,本来在c#中是一件极为简单和优雅的事情,想不到在java的世界里,却如此烦琐,先看下类图: 先定义了一个CallBackTask,做为外层的面子工程,其主要工作为start 开始一个异步操作
菩提树下的杨过
2018/01/18
3.3K0
java 中的异步回调
javascript异步中的回调
我们之前介绍了javascript异步的相关内容,我们知道javascript以同步,单线程的方式执行主线程代码,将异步内容放入事件队列中,当主线程内容执行完毕就会立即循环事件队列,直到事件队列为空,当用产生用户交互事件(鼠标点击,点击键盘,滚动屏幕等待),会将事件插入事件队列中,然后继续执行。 处理异步逻辑最常用的方式是什么?没错这就是我们今天要说的---回调
陌上寒
2019/04/02
2.2K0
javascript异步中的回调
CompletableFuture异步回调
  Future模式是高并发设计与开发过程中常见的设计模式,它的核心思想是异步调用。对于Future模式来说,它不是立即返回我们所需要的数据,但是它会返回一个契约(或异步任务),将来我们可以凭借这个契约(或异步任务)获取需要的结果。
别团等shy哥发育
2023/10/17
5040
CompletableFuture异步回调
实现java的异步回调
说下java的异步回调模式,是指当调用者实现了CallBack接口,调用者包含了被调用者的引用,在调用者类中调用被调用者的方法,然后在被调用者类的方法中调用调用者类的callBack方法。
码农王同学
2020/04/08
4.7K0
实现java的异步回调
JS基础——异步回调
一个刚入前端的小菜,虽然以前看到过关于回调的文章,但是呢,理解起来有点费劲啊。当时的脑海里就一个概念。
一个会写诗的程序员
2018/08/17
4.3K0
JS基础——异步回调
使用委托实现同步回调与异步回调
使用委托可以执行的一项有用操作是实现回调。回调是传入函数的方法,在函数结束执行时调用该方法。 例如,有一个执行一系列数学操作的函数。在调用该函数时,也向其传递一个回调方法,从而在函数完成其计算工作时,调用回调方法,向用户通知计算结果。 同步回调    首先声明两个方法: AddTwoNumbers():接受两个整型实参以及一个类型委托 ResultCallback():接受一个字符串,并显示出来。代码如下: using System; using System.Collections.Generic
hbbliyong
2018/03/05
3.1K0
使用委托实现同步回调与异步回调
GIL与异步回调
GC进程当内存占用达到某个阈值时,GC会将其他线程挂起,然后执行垃圾清理操作,垃圾清理也是一串代码,也就需要一条线程来执行。
小小咸鱼YwY
2019/07/24
9360
React回调形式的ref
在React中,我们可以使用回调形式的ref来引用组件或DOM元素。回调形式的ref允许我们在组件渲染后执行自定义的回调函数,并将组件或DOM元素的引用作为参数传递给回调函数。
堕落飞鸟
2023/05/19
6610
Go并发之同步异步、异步回调
众所周知,Go语言最强大的地方在于它支持的高并发特性。下面我们先来了解一下Go并发的一些理论基础:同步异步、异步回调。也顺带在此介绍一下进程、线程、协程的区别。
Regan Yue
2021/09/16
1.4K0
Go并发之同步异步、异步回调
大家好,这里是努力变得优秀的R君,本次我们这里继续来进行Golang系列《让我们一起Golang》,区块链系列内容正在进行中,共识算法已经完毕,接下来我们来构建一个以太坊DAPP,我们都知道以太坊的主体是Go语言,所以我们还是十分有必要将Go语言的基础学好,本次我们继续来再谈Go并发之同步异步、异步回调,希望对大家有帮助。
Regan Yue
2022/04/19
1.9K0
代码小析 - 异步回调
之前是计划one week one alogrithm,结果算法是个短板,不仅要理解,还得再写出代码,特别烧脑,所以中间穿插一下,换换脑子
码农戏码
2021/03/23
8980
Python 中的进程、线程、协程、同步、异步、回调
进程和线程究竟是什么东西?传统网络服务模型是如何工作的?协程和线程的关系和区别有哪些?IO过程在什么时间发生? 在刚刚结束的 PyCon2014 上海站,来自七牛云存储的 Python 高级工程师许智翔带来了关于 Python 的分享《Python中的进程、线程、协程、同步、异步、回调》。 一、上下文切换技术 简述 在进一步之前,让我们先回顾一下各种上下文切换技术。 不过首先说明一点术语。当我们说“上下文”的时候,指的是程序在执行中的一个状态。通常我们会用调用栈来表示这个状态——栈记载了每个调用层级执行到哪
小小科
2018/05/02
1.7K0
co.js 异步回调的原理
co.js 作为 koa 框架的核心库,利用 es6 Generator 新特性来解决 callback hell 已经非常流行 。 本文将剖析 co.js 是为何用同步的写法,就可以解决异步回调的问题。
IMWeb前端团队
2019/12/04
2.5K0
co.js 异步回调的原理
IMWeb前端团队
2018/01/08
2.7K0
co.js 异步回调的原理
作者:何方舟 co.js 作为 koa 框架的核心库,利用 es6 Generator 新特性来解决 callback hell 已经非常流行 。本文将剖析 co.js 是为何用同步的写法,就可以解决
腾讯IVWEB团队
2017/03/13
2.6K0
Python 回调函数实现异步处理
说到异步处理大家应该会联想到Ajax 处理,那我们先来说说什么是Ajax 请求。
Wu_Candy
2022/07/04
1.9K0
Python 回调函数实现异步处理
异步JavaScript:从回调地狱到异步和等待
这是一个典型的异步编程挑战,您如何选择处理异步调用,在很大程度上,会导致或破坏您的应用程序,并且可能是您的整个启动。
WindCoder
2018/09/19
3.8K0
异步JavaScript:从回调地狱到异步和等待
异步与回调/函数的作用域链
程序里面所有的任务,可以分成两类:同步任务(synchronous)和异步任务(asynchronous)。
代码之风
2018/10/31
1.8K0
【说站】javascript回调函数的异步探究
1、JavaScript代码本质上总是阻塞的。但是这种阻塞性使我们无法在某些情况下编写代码。
很酷的站长
2022/11/23
1K0
点击加载更多

相似问题

记忆回调函数

13

重用异步回调中的值

13

回调与异步回调

12

未调用react-select异步回调

120

将来自React类组件的回调记忆为闭包

14
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档