React中setState方法异步问题

用户9914333

发布于 2022-07-21 19:46:39

1.3K00

代码可运行

文章被收录于专栏：bug收集bug收集

运行总次数：0

代码可运行

问题描述

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

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

代码如下：

constructor(){
        super()
        this.state={
            userData:[]
        }
    }

this.setState(
   userData:this.getUserData()
)

原因

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

解决方案

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

this.setState(userData:this.getUserData(),()=>{
      //
      // 
})

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

 async getUserData(){
        await this.setState({
            userData:this.getUserData()
        });
 }

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-07-16，如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

登录后参与评论

0 条评论

热度