react中的setState机制引发的坑

问题

今天在做作业的过程中，在class一个组件内，因为一个函数中的逻辑有些复杂，于是拆成若干个函数，

然后在一个函数中调用其他函数，但是运行的时候发现并不能运行出正常的结果。如以下函数，

setEnterTime(time){
	this.setState({
		enterTime:time
	});
	this.findMin()
}

解决过程

使用浏览器对变量进行排查，发现enterTime并没有成功赋值，所以导致后面的计算结果出现了错误

发现是react的this.setState更新机制导致的。

setState 通过一个队列机制实现 state 更新。
当执行 setState 时，会将需要更新的 state 合并后放入状态队列，而不会立刻更新 this.state，队列机制可以高效地批量更新 state。

所以在使用setState更新后，并没有立即更新，而是先执行了后面的函数，所以出现了错误。

解决方法
使用setState的第二个参数，当setState结束并重新呈现该组件时将被调用。

setEnterTime(time){
	this.setState({
		enterTime:time
	},()=>{
		this.findMin();
	});
}

另外，如果不通过setState 而直接修改 this.state 的值，那么该 state 将不会被放入状态队列中，当下次调用setState 并对状态队列进行合并时，将会忽略之前直接被修改的 state，而造成无法预知的错误。