Это случилось со мной несколько раз. Мне всегда удалось обойти эту проблему, но я все еще заинтригован, чтобы понять, почему это происходит, и что я пропустил.
По существу, если у меня есть условие в моем методе 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 миллисекунд, все будет работать так, как ожидалось. Однако я хотел бы понять, что я неправильно понял, так что мне не нужен этот хак.