Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >React中setState方法异步问题

React中setState方法异步问题

作者头像
用户9914333
发布于 2022-07-21 11:46:39
发布于 2022-07-21 11:46:39
1.3K00
代码可运行
举报
文章被收录于专栏:bug收集bug收集
运行总次数:0
代码可运行

问题描述

在项目中使用state存储本组件的状态 , 使用setState对组件进行状态更新 , setState更新数据会重新渲染页面

问题:state的值改变了,但是页面没有渲染出来

代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
constructor(){
        super()
        this.state={
            userData:[]
        }
    }

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
this.setState(
   userData:this.getUserData()
)

原因

原来,setState方法是异步的,在state状态改变还没有执行完时,使用state的值,还是改变前的值

解决方案

方法一:使用setState的回调函数,此回调函数会在状态改变后,进行调用 。将要使用state的代码写入回调函数即可

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
this.setState(userData:this.getUserData(),()=>{
      //
      // 
})

方法二:使用async 与await结合使用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 async getUserData(){
        await this.setState({
            userData:this.getUserData()
        });
 }
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-07-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 bug收集 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
react中setState是同步还是异步的
我们都知道,React框架是由数据来驱动视图变化的,基于状态的管理实现对组件的管理,也就是组件当中的state,通过setState方法来修改当前组件的state,以达到视图的变化。
OECOM
2020/07/01
1.3K0
setState同步异步场景
React通过this.state来访问state,通过this.setState()方法来更新state,当this.setState()方法被调用的时候,React会重新调用render方法来重新渲染UI。相比较于在使用Hooks完成组件下所需要的心智负担,setState就是在使用class完成组件下所需要的心智负担,当然所谓的心智负担也许叫做所必须的基础知识更加合适一些。
WindRunnerMax
2022/05/06
2.5K0
React中的setState的同步异步与合并
这篇文章主要是因为自己在学习React中setState的时候,产生了一些疑惑,所以进行了一定量的收集资料和学习,并在此记录下来
Qwe7
2022/06/09
9810
从零实现一个React(四):异步的setState
在上一篇文章中,我们实现了diff算法,性能有非常大的改进。但是文章末尾也指出了一个问题:按照目前的实现,每次调用setState都会触发更新,如果组件内执行这样一段代码:
前端迷
2019/08/27
8560
从零实现一个React(四):异步的setState
React 的 setState 是同步还是异步?
如果是异步的,那应该打印的时候 count 还没修改,依然是 0,所以打印两次 0。
神说要有光zxg
2022/11/11
2.6K0
React 的 setState 是同步还是异步?
react 常见setState的原理解析
在一些mv*框架中,,就是将一段时间内对model的修改批量更新到view的机制。比如那前端比较火的React、vue(nextTick机制,视图的更新以及实现)为例。
念念不忘
2019/03/29
1.3K0
react 常见setState的原理解析
【React源码笔记】setState原理解析
点击上方蓝字,发现更多精彩 导语 大家都知道React是以数据为核心的,当状态发生改变时组件会进行更新并渲染。除了通过React Redux、React Hook进行状态管理外,还有像我这种小白通过setState进行状态修改。对于React的初学者来说,setState这个API是再亲切不过了,同时也很好奇setState的更新机制,因此写了一篇文章来进行巩固总结setState。 React把组件看成是一个State Machines状态机,首先定义数值的状态state,通过用户交互后状态发生改变,然
腾讯VTeam技术团队
2021/01/29
2.2K0
从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/...)
牧云云
2018/08/14
8360
从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现
React中的setState的同步异步与合并
原理可以用这张图来描述,即在react中,setState通过一个队列机制实现state的更新。当执行setState时,会把需要更新的state合并后放入状态队列,而不会立刻更新this.state,当进入组件可更新状态时,这个队列机制就会高效的批量的更新state。
Qwe7
2022/06/09
1.6K0
React修仙笔记,筑基初期之更新数据
在之前的一篇文章中我们有了解到react函数组件和class组件,以及react数据流,状态提升,以及react设计哲学,在我们了解了这些基本的知识后,我们需要了解react内部更深的一些知识
Maic
2022/12/21
5400
React修仙笔记,筑基初期之更新数据
React setState 是异步执行还是同步执行?
把 setState 放在定时器里就会同步更新。放在自定义事件函数里也会同步更新,例如:
多云转晴
2020/08/04
2.6K0
React setState 是异步执行还是同步执行?
React 中的useState 和 setState 的执行机制
useState 和 setState 在React开发过程中 使用很频繁,但很多人都停留在简单的使用阶段,并没有正在了解它们的执行机制,例如:「它们是同步的还是异步的?」 正因为没有理解它们,才致使开发过程中会碰到一些出乎意料的bug。本文将带大家了解它们的特性。
用户8921923
2022/10/24
3.3K1
React基础(6)-React中组件的数据-state
一个组件最终渲染的数据结果,除了prop还有state,state代表的是当前组件的内部状态,你可以把组件看成一个'状态机",它是能够随着时间变化的数据,更多的是应当在实现交互时使用,根据状态state的改变呈现不同的UI展示
itclanCoder
2019/11/04
6.2K0
React: States is tricky
类似于 Android 的生命周期调节参数,此外 state 必须在定义它的那个 class 里面使用。
szhshp
2022/09/21
4370
社招前端react面试题整理5失败
Context 通过组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。
beifeng1996
2023/01/09
4.7K0
React 中setState更新state何时同步何时异步?
setState的“异步”并不是说内部由异步代码实现,本身的执行过程和代码都是同步的。
Clearlove
2021/03/17
2.3K0
react相关面试知识点总结
组件状态数据或者属性数据发生更新的时候,组件会进入存在期,视图会渲染更新。在生命周期方法 should ComponentUpdate中,允许选择退出某些组件(和它们的子组件)的和解过程。
beifeng1996
2022/11/07
1.1K0
腾讯前端二面react面试题合集
该方法当props发生变化时执行,初始化render时不执行,在这个回调函数里面,你可以根据属性的变化,通过调用this.setState()来更新你的组件状态,旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的,并不会触发额外的render调用。
goClient1992
2022/09/14
1.8K0
从一次react异步setState引发的思考
一个异步请求,当请求返回的时候,拿到数据马上setState并把loading组件换掉,很常规的操作。但是,当那个需要setState的组件被卸载的时候(切换路由、卸载上一个状态组件)去setState就会警告:
IMWeb前端团队
2019/12/03
7330
从一次react异步setState引发的思考
React-Hook最佳实践
Hooks 是 React 16.8 新增的特性,它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性,无需转化成类组件
xiaofeng123aa
2022/10/17
4K0
相关推荐
react中setState是同步还是异步的
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文