解决React.js的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])