前言
刚学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])