react中setState设置值失效

在学react小书, 练习时遇到问题:

有一只狗，不允许别人摸它，一旦摸它就会叫，然后就跑了；这只狗跑一段时间（2s）以后就会停下来，也不叫了。 完成 Dog组件，当用户点击的时候会执行自身的 bark 和 run 方法。给这个 Dog 组件加上状态 isRunning 和 isBarking，在进行相应的动作的时候设置为 true，停下来的时候设置为 false。

class Dog2 extends Component{
constructor () {
super()
this.state={isRunning:false,isBarking:false}
}

bark () {
this.setState({
isBarking: !this.state.isBarking,
})
console.log(this.state.isBarking ? "barking" : "stopbarking")
}

run () {
this.setState({
isRunning: !this.state.isRunning,
})
console.log(this.state.isRunning ? "running" : "stoprunning")
}

//如果不使用setTimeout定时为0, 则setState无法更新值
//也就是isRunning的值仍然是false (stoprunning)
onclickChangeState(){
setTimeout(()=>this.bark(),0)	//使用setTimeout, isRunning值变为true
setTimeout(()=>this.run(),0)

// this.bark()	//不使用setTimeout, isRunning值仍然为false
// this.run()

setTimeout(()=>{	//使用setTimeout
this.bark()
this.run()
},2000)
}

render () {
return (
<div onClick={this.onclickChangeState.bind(this)}>DOG</div>
)
}
}

利用setTimeout可以解决问题, 但是不太懂其中的原理, 应该是react的生命周期的问题(大概率), 如果有人懂, 还请赐教.

• 点赞
• 收藏
• 分享
• 文章举报