Получение последней информации о состоянии onClick () при использовании React Hooks

Question

У меня есть состояние formErrors примерно так:

const [formErrors, setFormErrors] = useState({});

И у меня есть обработчик onSubmit() примерно так:

const onSubmit = () => {

   validateForm();

   if(formErrors.length === 0) {
      // submit form
   }
}

Функция validateForm() просто заполняет formErrors если есть ошибки.

Этот onSubmit запускается с помощью свойства onClick кнопки "Отправить".

Итак, что происходит:

1. Я нажимаю «Отправить».
2. onSubmit() метод вызывается.
3. validateForm() вызывается.
4. setFormErrors() вызывается из validateForm().
5. Поскольку состояние установки асинхронное, оно переместится в строку if(formErrors.length === 0), которая на этом этапе вернет true.
6. Форма отправляется (это нежелательное поведение, так как этого не должно быть).
7. setFormErrors() готово и устанавливает formErrors в [error1, error2]. Означает, что formErrors.length действительно должно быть > 0.

Состояние, не обновляющееся немедленно, вызывает ошибку, при которой я могу отправить форму, даже если присутствуют ошибки из-за условия true сначала, прежде чем стать false (где onSubmit() функция уже завершена).

Как решить эту проблему?