社区首页 >问答首页 >使用useState钩子时,计数器不会递增

我有以下代码:

代码语言:javascript
代码运行次数:0
复制
  const [count1, setCount1] = useState(0);


  const handleAsyncUpdate = async () => {
    setCount1(count1 + 2);
    setCount1(count1 + 1);
  };

  const handleSyncUpdate = () => {
    setCount1(count1 + 2);
    setCount1(count1 + 1);
  };

  console.log("render", count1);
  return (
    <div className="App">
      <h2>{count1}</h2>
      <button type="button" onClick={handleAsyncUpdate}>
        Click for async update
      </button>
      <button type="button" onClick={handleSyncUpdate}>
        Click for sync update
      </button>
    </div>
  );
}

当我单击第二个按钮时,我希望<h2>{count1}</h2>呈现3 (0 +1+ 2),但实际上它呈现的是1

如果我将setCount1(count1 + 1);切换到setCount1(count => count + 1);,那么它可以正常工作,但是为什么呢?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-19 15:03:04

我认为您对useState (或者如果您使用类,甚至是this.setState )的工作方式感到困惑。这些操作总是异步的,React根据它认为的优先级或非优先级来安排这些更改。

通过将async放在一个函数上,您并不是说它突然就是异步的,而是说它返回一个Promise

就React的工作方式而言,这不会改变任何事情。所以实际上你的handleSyncUpdatehandleAsyncUpdate对于React来说基本上是一样的,它们都触发了异步操作(改变状态)。

setCount1(count => count + 1) -使用此方法,您实际上是在使用最后一个状态值进行更新,从而保证新值将是最后一个值+ 1。

setCount1(count1 + 1) -在这种情况下,您使用的值在此setState被调用的时刻和React执行更新的时刻之间被另一个setState改变。

我希望这能帮到你

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

https://stackoverflow.com/questions/62472783

复制
相关文章
linu0.11父进程等待子进程退出和进程退出原理分析
// 释放pcb的一页内存,重新调度进程 void release(struct task_struct * p) { int i; if (!p) return; for (i=1 ; i<NR_TASKS ; i++) if (task[i]==p) { task[i]=NULL; free_page((long)p); schedule(); ret
theanarkh
2019/04/24
1.9K0
如何退出Vim
阅读本文大概需要 1 分钟 退出Vim: 如果您处于编辑模式,请先<Esc>按键。 然后输入:wq + <Enter>保存并退出。 你想要的很少见,但是如果没有保存就退出,你就可以跑了 :q! + <Enter> 结束 鉴于您处于命令模式: :wqa将写入,退出所有缓冲区(如果您有多个缓冲区) :x 也将保存并退出 :ex 如上 ZZ 将保存并退出 ZQ 将退出 :1,5wq将只保存第1到第5行并退出 还有更多。多很多。感兴趣吗?你学会了吗?
硬核编程
2019/09/25
5.3K0
centos 如何退出vim
点击ESC进入“正常模式”,然后输入“:”,进入“命令模式”。此时屏幕的下方会出现一个冒号,你可以输入以下命令,并按“ENTER”执行:
全栈程序员站长
2022/08/31
3.1K0
怎么用命令提示符运行JAVA代码_java命令提示符如何进入
用命令提示符编译Java程序的方法62616964757a686964616fe59b9ee7ad9431333363363432
全栈程序员站长
2022/09/27
9360
怎么用命令提示符运行JAVA代码_java命令提示符如何进入
父进程退出时如何确保子进程退出?
子进程退出的时候,父进程能够收到子进程退出的信号,便于管理,但是有时候又需要在父进程退出的时候,子进程也退出,该怎么办呢?
编程珠玑
2019/09/02
12.4K0
vc如何退出程序
void CMainFrame::OnClose() { // TODO: Add your message handler code here and/or call default if (MessageBox("确定要退出吗?","提示",MB_YESNO|MB_DEFBUTTON2)==IDYES) { CFrameWnd::OnClose(); } }
阳光岛主
2019/02/19
2.7K0
linux vi命令 退出不保存,linux vi保存退出命令(如何退出vi)
若用户真的希望用文件的当前内容替换newfile中原有内容,可使用命令 :q! Vi放弃所作修改而直接退到shell下,则Vi在显示窗口的状态行给出提示信息: File exists (use ! to override) 此时, 在末行模式下,。
全栈程序员站长
2022/11/11
27.3K0
如何突破Windows环境限制打开“命令提示符”
如今,许多企业或组织都会通过使用受限的windows环境来减少系统表面的漏洞。系统加固的越好,那么也就意味着能被访问和使用到的功能就越少。 我最近遇到的情况是,一个已经加固的系统同时受到McAfee Solidcore的保护。Solidcore几乎阻止用户对系统任何的更改操作,如安装/取消软件安装,运行可执行文件,启动应用程序等。 我所测试的系统(Windows 7)被系统管理员设置了登录密码,因此除了访问登录界面和重启系统外,我无法访问该系统任何其他的功能。 为此,我花了近一个礼拜来收集关于该应用和系统的
FB客服
2018/02/27
1.1K0
如何突破Windows环境限制打开“命令提示符”
cmd中如何退出Python
cmd中如何退出Python      (1)在命令行上输入exit()      (2)在命令行上输入quit() 好像还有一种方法是在命令行上输入Ctrl+Z,再按回车,但是我一直成功不了,
py3study
2020/01/03
2.2K0
cmd中如何退出Python
何时使用Serverless,何时使用Kubernetes
我经常被问到的一个问题是:我应该使用Serverless还是Kubernetes来构建云原生应用程序?两种计算选项都有利有弊,这取决于您的需求,您应该选择哪种选项。
February
2018/11/23
1.7K0
何时应该重构代码?如何重构代码?
日常工作中,相信大家都见过一些看见就想骂人的代码,那么今天呢,我们就来聊聊何时应该重构代码,以及如何重构代码。文章有点长,但是看完一定会有很多收获哦~
kirito-moe
2021/09/08
1.7K0
MySQL索引的分类、何时使用、何时不使用、何时失效?
MySQL索引分为普通索引、唯一索引、主键索引、组合索引、全文索引。索引不会包含有null值的列,索引项可以为null(唯一索引、组合索引等),但是只要列中有null值就不会被包含在索引中。
PHP开发工程师
2021/05/21
8570
MySQL索引的分类、何时使用、何时不使用、何时失效?
vim编辑页面怎么退出_如何退出Vim编辑器?[通俗易懂]
在输入命令之前,击中ESC钥匙..进入后,按下回归来确认。ESC完成当前命令并将Vim切换到正常模式..如果你按下:,:将出现在底部屏幕上。这证实了您实际上是在输入命令而不是编辑文件。大多数命令都有缩略语,可选部分括在括号中:c[ommand].标记为‘*’的命令仅为Vim(未在Vi中实现)。安全-退出(如果有未保存的更改,则失败)::q[uit]退出电流窗户..如果这是最后一个窗口就退出Vim。当在当前进行更改时,此操作将失败。缓冲器.:qa[ll]*退出所有窗口和Vim,除非有一些缓冲区已经更改。提示-退出(如果有未保存的更改提示):conf[irm] q[uit]*退出,但当有一些缓冲区已被更改时,请给予提示。:conf[irm] xa[ll]*编写所有更改的缓冲区并退出Vim。当某些缓冲区无法写入时,打开提示符。编写(保存)更改并退出::wq写入当前文件(即使没有更改)并退出。当文件为只读或缓冲区没有名称时,写入失败.:wqa[ll]*所有窗户。:wq!同样,但写的甚至是只读文件。:wqa[ll]!*所有窗户。:x[it], ZZ(与细节)。只写文件如果它被改变了然后辞职,:xa[ll]*所有窗户。放弃更改并退出::q[uit]! ZQ*不写就退出,当可见缓冲区发生更改时也是如此。当存在更改的隐藏缓冲区时,不会退出。:qa[ll]!*, :quita[ll][!]*退出Vim,所有对缓冲区的更改(包括隐藏的)都会丢失。压榨回归来确认命令。这个答案没有引用所有Vim写和退出命令和参数。实际上,它们在VIM文档.vim有广泛的内置帮助,输入ESC:help回归打开它。这个答案来自于另一个,最初由@dirvine编写,并由其他so用户编辑。我已经包括了更多的信息,从Vim参考,所以评论和一些其他来源。Vi和Vim的差异也得到了反映。
全栈程序员站长
2022/09/02
4.7K0
MySQL 索引的分类、何时使用、何时不使用、何时失效?
blog.csdn.net/weixin_39420024/article/details/80040549
用户1516716
2021/03/23
1K0
如何暂时退出vim并返回
本文翻译自:How to temporarily exit vim and go back
全栈程序员站长
2022/09/01
2.1K0
python中如何退出多层循环
 2、使用函数配合return关键字 实现跳出循环(在函数内部只要执行完return语句 则直接退出函数)
py3study
2020/01/20
2.2K0
linux怎么修改命令行怎么退出,linux vi保存退出命令(如何退出vi)[通俗易懂]
在命令模式中,连按两次大写字母Z,若当前编辑的文件曾被修改过,则Vi保存该文件后退出,返回到shell;若当前编辑的文件没被修改过,则Vi直接退出, 返回到shell。
全栈程序员站长
2022/11/10
20.4K0
【说站】linux 如何退出python
使用python提供的exit()函数,linux平台和windows平台上的exit()函数执行结果,都可以正常退出。唯一的区别是,windows平台结束后多输出了一行空行。
很酷的站长
2022/11/23
8.4K0
【说站】linux 如何退出python
go :如何优雅地超时退出
业务代码中,我们怎么让一段程序,在某个时间段内执行,然后优雅退出?本文给出一种办法:使用wait.pollpackage mainimport ( "fmt" "time" "k8s.io/apimachinery/pkg/util/wait" "k8s.io/klog")func main() { for { a := wait.Poll(time.Second, time.Second*5, func() (done bool, err error) {
IT工作者
2022/07/22
7200
Visual Studio 命令提示符
Visual Studio 命令提示和 SDK 命令提示会自动设置环境变量,使您能够轻松使用 .NET Framework 工具。 在 .NET Framework 4 版 和更高版本中,应使用 Visual Studio 命令提示,它可从“Visual Studio 工具”中获取。对于 .NET Framework 的较早版本,可以使用 Visual Studio 命令提示符或 SDK 命令提示。SDK 命令提示包含在 .NET Framework version 2.0 Software Develop
hbbliyong
2018/03/05
1.4K0

相似问题

如何知道进程何时退出?

11

如何知道进程何时退出?

116

python进程如何知道何时退出?

12

等待方法何时退出程序?

13

如何知道UIWebView何时全屏退出?

12
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

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

洞察 腾讯核心技术

剖析业界实践案例

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