关于react的this.setState异步问题，setState数据不更新

最新推荐文章于 2024-04-22 11:43:14 发布

Chris__Wang

最新推荐文章于 2024-04-22 11:43:14 发布

阅读量9.4k

点赞数 8

分类专栏：个人总结文章标签： setState不更新 setState异步

本文链接：https://blog.csdn.net/Chris__wang/article/details/82625933

版权

78 篇文章 1 订阅

订阅专栏

我们在给state状态赋值的时候一般都会使用

this.setState({
    name:newName
})

但是有时候我们会发现值的更新滞后，比如我们刚刚更新的name值，但是页面显示的还是以前的name，出现这种情况的原因就是 setState() 有时候是异步的

React 为了优化性能，有可能会将多个 setState() 调用合并为一次更新。

所以我们需要用到回调函数来解决

this.setState({
    name:newName
},fucntion(){
    //在这里进行一些与name有关的业务逻辑处理
    //这里的name值是最新的
    console.log(name)
})

当然有些时候我们仅仅就是为了更新页面数据信息，显然上面的方法不适用，这时我们使用下面的方法

它接收一个函数，而不是一个对象。该函数接收前一个状态值作为第 1 个参数，并将更新后的值作为第 2 个参数

this.setState((prevState, props) => ({
    name: newName
}));

这样更新的name就是同步的了，当然此处也可以不使用Arrow Function。

【右上角点个赞，谢谢】

关注