解决React.js的setState的异步问题

原创已于 2023-02-24 14:35:45 修改 · 4.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2022-10-05 18:33:01 首次发布

React.js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在React中使用setState时遇到的异步问题及解决方案。通过实例代码展示了setState的异步特性，并提供了两种解决方法：一是使用async...await修饰符，二是利用setState的回调函数。

前言

刚学react，记录一下自己练习代码时，遇到并解决的小问题。

一、问题描述

查看下面这段代码。

changeChecked = (key,value) => {
    let index = this.state.eventValueList.findIndex(item =>{
      return item.key === key
    })
    this.setState(state =>{
      state.eventValueList[index].ifChecked = value
      console.log('更改状态返回前',state.eventValueList)
      return {eventValueList:state.eventValueList}
    })
    console.log('更改状态完毕',this.state)
    this.computedChecked()
  }

刚写完运行的时候，以为是先输出更改状态返回前，结果遇到逻辑bug，到了控制台看了一下，发现先输出的是更改状态完毕。

所以很明显setState是异步。

二、解决思路

方法一：使用async...await修饰符（此方法可能会导致性能降低，不推荐使用）

简单理解，后面的代码会等待await修饰符修饰的异步操作完成后再执行。

方法二：使用官方的方法

对于class组件，使用setState的第二个参数——回调函数

将需要setState执行后的再运行的代码放到setState的回调函数中。

对于function组件，使用useEffect的监听

const [name, setName] = useState("张三")

const changeName = () => {
    setName("李四");
    console.log(name);//张三
}

//把在改变state后，并在本次生命周期中调用该state时的代码写在useEffect的callback中
useEffect(()=>{
    console.log(name);//李四
},[name])