是否有理由在循环中调用setSate()会阻止它多次更新状态?

我有a very basic jsbin本书突出了我所看到的问题.有两个按钮.其中一个将州计数器更新1.另一个调用循环中的一个的底层函数——这似乎会多次更新状态.

我知道解决这个问题的几种方法,但我想确保我首先理解了这里的基本机制.为什么不能在循环中调用setState?我是不是把它编得很笨拙,妨碍了预期的效果?

推荐答案

React Docs人中:

setState()对组件状态的更改进行排队,并告知React需要使用更新的状态重新呈现此组件及其子组件.这是更新用户界面以响应事件处理程序和服务器响应的主要方法.

setState()视为更新组件的请求,而不是即时命令.为了更好地感知性能,React可能会延迟它,然后在一次过程中更新几个组件.React不保证立即应用状态更改.

setState()并不总是立即更新组件.它可能会批处理更新或将更新推迟到以后.这就使得拨打setState()后立即阅读this.state成为一个潜在的trap .

基本上,不要循环调用setState.这里发生的事情正是文档所指的:this.state正在返回之前的值,因为挂起的状态更新尚未apply.

Reactjs相关问答推荐

实时收听react前端应用程序中的webhook响应

如何使用json将购物车数组传递到后台API

无法使用#13;或br将新行设置为文本区域'"&"<>

NextJs Form不允许我输入任何输入,

为什么登录错误和密码在创建Reaction-Hook-Form后立即被删除?

使用Reaction-Hook-Form时未激发React.js onBlur事件

梅X折线图无响应

在Reaction中管理多个状态

在每页上应用字体-NextJS

REACTION-Easy-SORT返回.map错误

当我无法引用模态组件时,如何使模态组件在 Next.js/React 中管理自己的状态?

尽管所有页面在 Reactjs 中都是公开的,但始终导航到特定页面

BrowserRouter改变了URL但没有链接到页面

Select 建议后如何关闭 vscode 添加自动完成={}

使用输入类型文本对 useState 和日期做出react

错误:无效挂钩调用.钩子只能在函数组件的主体内部调用.使用 next/router 时

哪个是创建 React 应用程序的更好方法?

使用 useRef(uuid()) 的目的是什么?

NextJs - 如何从站点 map 生成器中删除重复的 URL?

由于另一个子组件,如何在react 中渲染另一个子组件