Реагируйте в окончательной форме: существовала ли ценность?

#reactjs #react-final-form

Вопрос:

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

Теперь подробности:

  1. У меня есть форма: ввод текста «Имя пользователя» и кнопка «Отправить».
  2. Я набираю значение (скажем, «Джон») и нажимаю «Отправить».
  3. Значение сохраняется в базе данных и отображается на моей веб-странице.
  4. Поле ввода очищено, и я могу ввести новое значение.
  5. Я снова ввожу «Джон».

Я должен получить сообщение об ошибке «Такое имя уже существовало», как только я переместил фокус из поля или нажал кнопку «Отправить».

Ответ №1:

Как правило, вы бы сделали это, выполнив предполетный запрос на сервер через fetch.

Отправляйте значения полей всякий раз, когда вы выполняете проверку(например, при изменении или размытии), и пусть сервер сообщит о любых проблемах (например, «Имя уже занято»).

Комментарии:

1. Эй, Рэй, как ты думаешь: должен ли я отправлять выборку один раз при рендеринге страницы (а затем добавлять введенные значения в локальное хранилище) или лучше отправлять запросы на сервер каждый раз во время выполнения проверки?

2. Локальное хранилище 1) будет работать только для текущего браузера, 2) выйдет из синхронизации с фактической базой данных и 3) сломается, если у вас слишком много имен. Отправляйте запрос на сервер всякий раз, когда вы сочтете это целесообразным для проверки. В реальном приложении вы захотите отменить проверку, чтобы избежать переполнения сервера запросами.

Ответ №2:

Реализуйте некоторую логику проверки В запросе POST. Прежде чем написать логику добавления пользователя в базу данных, проверьте, существует ли уже пользователь с таким именем пользователя, и если да, верните сообщение об ошибке. Это также зависит от используемой вами базы данных, как они обрабатывают поиск документов.

Если это MongoDB, вам нужно использовать метод .find() и найти по имени пользователя. Если вы найдете подходящее имя пользователя, верните сообщение об ошибке с просьбой ввести уникальное имя пользователя.