setState в реакции не работает над кликом [duplicate]

Вот документы React:

НИКОГДА не мутируйте this.state напрямую, так как вызов setState () впоследствии может заменить мутацию, которую вы сделали. Обработайте this.state, как если бы он был неизменным.

setState () не сразу мутирует this.state, но создает ожидающий переход состояния. Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение.

Нет гарантии синхронной работы вызовов с setState, и вызовы могут быть собраны для повышения производительности. setState () всегда вызывает повторную визуализацию, если логика условного воспроизведения не реализована в shouldComponentUpdate ().

Если используются изменяемые объекты и логика не может быть реализована в shouldComponentUpdate (), вызов только setState () когда новое состояние отличается от предыдущего состояния, избежит ненужных повторных передач.

Следите за методами реагирования на жизненный цикл!

• http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
• https://reactjs.org/docs/react-component.html

Я работал несколько часов, чтобы узнать, что getDerivedStateFromProps будет вызван после каждого setState().

Как указано в документации React, нет гарантии того, что setState запущен синхронно, поэтому ваш console.log может вернуть состояние до его обновления.

Майкл Паркер упоминает о передаче обратного вызова внутри setState. Другой способ обработки логики после изменения состояния осуществляется с помощью метода жизненного цикла componentDidUpdate, который является методом, рекомендованным в документах React.

Обычно мы рекомендуем использовать для этой логики componentDidUpdate ().

Это особенно полезно, когда могут быть последовательные setState s, и вы хотели бы запустить ту же функцию после каждого изменения состояния. Вместо добавления обратного вызова к каждому setState, вы можете поместить функцию внутри componentDidUpdate с конкретной логикой внутри, если необходимо.

// example
componentDidUpdate(prevProps, prevState) {
  if (this.state.value > prevState.value) {
    this.foo();  
  }
}