碰到一个比较诡异的bug
有个代码块
if(this.state.isTure){
this.state.isTure = !this.state.isTure;
//其他操作
}
按理来说,一次交互执行过程中,这行代码执行完后,里面的条件语句不会再执行(这个值是放在state里面的,这段代码一次点击可能会执行两次,正常下应该执行一次,这段代码不会再执行),但是通过日志防线这段代码执行了两次。
后来在所经历的生命周期函数里面加了debugger,发现这段代码在执行完后并没有执行到相关的生命周期函数,也就是说,虽然这块修改了state的值,但是此时因为其他原因,又走到这块代码了,导致这块代码执行了两次,修改完成胡,状态又被重置了。
特别说明下:这块执行的是百度地图相关的代码,第一次点击执行了这段代码,但是随后百度地图执行了一次地图缩放,里面涉及到了部分值的改变,导致这块又执行了到这个代码块,但是第一次修改的值并没有生效,所以又进去了,导致每点击一次,数据呗重置,视觉效果就是操作不起作用。
后来改了这部分代码
let isTure = this.state.isTure;
if(this.state.isTure){
this.state.isTure = !isTure;
isTure = !isTure ;
//其他操作
}
生效了
总结:
这块出现问题的原因是:百度地图是一个map对象,缩放功能属于这个对象的一个方法,第一次走这个方法对地图map做了操作,完了之后这个方法的在这种情况下被地图内部触发执行(这块原因暂不清楚),此时state的值还没修改过来,又到了该代码块,又执行了一遍。
所以这块设置了一个局部变量,因为这个方法里面的代码是串行的,第二次获取的局部变量值肯定是第一次修改后的,所以可以保持前后一致
综上:
在获取state的值时,先把他赋值给一个局部变量
更改state前,先修改局部变量,通过局部变量来更新state