Я реализовал простой способ проверки записей в форме. Функции валидатора могут быть синхронизированными или асинхронными.
const validate = useCallback(async (values: FormData) => {
return {
email: await sequence(values.email, required, isEmailValid, emailAlreadyExists),
password: sequence(values.password, required, isPasswordComplex)
};
}, []);
Валидатором «emailAlreadyExists» является асинхронный, поэтому я должен декорировать всю свою функцию валидатора как «асинхронный». Проблема в этом случае заключается в том, что мое поле ввода перерисовывается 3 раза:
- 1-й раз: ошибка устанавливается на
undefined - 2-й и 3-й раз:Поле «meta.error» содержит сообщение об ошибке.
Это вызывает нежелательные эффекты в пользовательском интерфейсе. Например, я использую формы Antd, и поскольку ошибка сбрасывается до undefined и снова устанавливается, отображение ошибки ввода элемента управления Antd начинает «мигать» всякий раз, когда я набираю любое из полей ввода.
IМы разобрали официальный пример синхронизации / асинхронной реакции в окончательной форме и слегка исправили его, чтобы воспроизвести проблему. Вот ссылка на код .
Как воспроизвести:
- Откройте консоль
- В поле «Имя пользователя» введите «Джон "
- (Консоль покажет сообщение об ошибке)
- Сейчас Скопируйте имя" Ringo "и вставьте в поле Имя пользователя
- В результате на консоли появятся 3 новые строки, первая из которых
undefined.
Возможно ли сохранить предыдущее сообщение об ошибке, пока асинхронный валидатор все еще работает? ? Это, вероятно, решит мою проблему с "мигающим" сообщением об ошибке.