javascript - ReactJS - 渲染调用，但 DOM 未更新

Question

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

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

let divClass = this.state.renderCondition ? 'red' : 'blue';

默认情况下，我将状态中的 renderCondition 设置为 false。

如果我然后在按钮上定义一个 onClick 处理程序(如下所示)，然后单击该按钮，同时调用渲染 IS，DOM NOT 已更新。也就是说类没有变化。

onClickCompile: function() {

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

        synchronousSlowFunction();
   });
}

这似乎与运行缓慢的同步代码有关，因为如果代码快速简单，DOM IS 会适当更新。

如果我将对 synchronousSlowFunction 的调用包装在 500 毫秒超时内，一切都会按预期进行。然而，我想了解我误解了什么，所以我不需要这个 hack。

Answer 1

你能分享按钮的onClick代码吗？我可能是错的，但这看起来像是一个错误设置的按钮 onClick 监听器。

确保在定义 onClick 回调时不带 ()，即

<button onClick={this.something} />

代替:

<button onClick={this.something()} />

发布更多代码以便我们可以获得更好(更大)的图片