ReactJS - 渲染调用,但DOM未更新

Tho*_*wes 14 javascript dom reactjs

这发生在我身上几次.我一直设法解决这个问题,但我仍然很想知道为什么会发生这种情况,以及我错过了什么.

基本上,如果我的方法中有一个条件,render它为我指定了类div:

let divClass = this.state.renderCondition ? 'red' : 'blue';
Run Code Online (Sandbox Code Playgroud)

默认情况下,我将renderCondition我的状态设置为false.

如果我然后onClick在按钮上定义处理程序(如下所示),并单击按钮,在调用渲染IS时,更新DOM .也就是说,班级不会改变.

onClickCompile: function() {

   this.setState({renderCondition: true}, function() {

        synchronousSlowFunction();
   });
}
Run Code Online (Sandbox Code Playgroud)

这似乎有事情做与该跑的慢同步代码,如果代码是快速和简单的DOM IS适当更新.

如果我synchronousSlowFunction在500毫秒超时中将呼叫包裹起来,一切都按预期工作.但是我想知道我误解了什么,以至于我不需要这个黑客.

小智 -2

设置状态后使用此行

this.setState({})
Run Code Online (Sandbox Code Playgroud)