Когда вы обновляете состояние React с помощью SetState и сразу же пытаетесь использовать измененное значение, оно по-прежнему показывает предыдущее значение! Вот почему! и как использовать измененное значение немедленно.

Почему ?

Как видите, это константы! Таким образом, состояние React неизменно для каждого рендера. Однако его можно изменить между разными рендерами.

Объект состояния React напрямую не изменяется с помощью SetState. Вместо этого он создает очередь для обновления объекта состояния компонента. Таким образом, состояние React обновляется асинхронно из соображений производительности.

Захват измененного состояния и немедленное использование

В этом случае мы можем использовать хук React useEffect. Он принимает функцию обратного вызова и список зависимостей для выполнения побочных эффектов и действий.

Поэтому вместо того, чтобы делать это,

Вы можете сразу же использовать измененное состояние следующим образом:

Если список зависимостей пуст, хук useEffect будет выполняться только один раз. Поскольку состояние count теперь является зависимостью (строка 11), этот useEffecthook будет выполняться всякий раз, когда изменяется состояние count .

Убедитесь, что ни одна из зависимостей не будет изменена в ловушке useEffect или в методах, которые используются в ловушке useEffect. В противном случае хук useEffect будет выполняться бесконечно, поскольку он продолжает отслеживать изменения в списке зависимостей.