Асинхронная валидация с React useFormStatus: Обновление статуса формы в асинхронном режиме

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

Понимание основ useFormStatus

Хук useFormStatus предоставляет информацию о последней отправке формы, которая была инициирована элементом или внутри <form>. Он возвращает объект со следующими свойствами:

• pending: Булево значение, указывающее, находится ли форма в процессе отправки.
• data: Данные, связанные с отправкой формы, если они доступны.
• method: HTTP-метод, использованный для отправки формы (например, 'get' или 'post').
• action: Функция, используемая в качестве действия формы.

Хотя useFormStatus кажется простым, он становится невероятно ценным при работе с асинхронными операциями, такими как проверка вводимых пользователем данных на удаленном сервере или выполнение сложных преобразований данных перед отправкой.

Необходимость асинхронной валидации

Традиционная синхронная валидация, при которой проверки выполняются немедленно в браузере, часто недостаточна для реальных приложений. Рассмотрим следующие сценарии:

• Доступность имени пользователя: Проверка того, занято ли имя пользователя, требует обращения к базе данных.
• Верификация электронной почты: Отправка письма для верификации и подтверждение его действительности требуют взаимодействия с сервером.
• Обработка платежей: Валидация данных кредитной карты включает в себя взаимодействие с платежным шлюзом.
• Автозаполнение адреса: Предложение вариантов адреса по мере ввода пользователем требует вызова внешнего API.

Эти сценарии по своей сути включают асинхронные операции. useFormStatus в сочетании с асинхронными функциями позволяет нам элегантно обрабатывать эти проверки, предоставляя пользователю немедленную обратную связь без блокировки пользовательского интерфейса.

Реализация асинхронной валидации с помощью useFormStatus

Давайте рассмотрим практический пример асинхронной проверки доступности имени пользователя.

Пример: Асинхронная проверка имени пользователя

Сначала мы создадим простой React-компонент с формой и кнопкой отправки.

            import React, { useState, useTransition } from 'react';
import { useFormStatus } from 'react-dom';

function UsernameForm() {
  const [username, setUsername] = useState('');
  const [isPending, startTransition] = useTransition();

  async function handleSubmit(formData) {
    "use server";
    const username = formData.get('username');

    // Simulate an API call to check username availability
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network latency

    const isAvailable = username !== 'taken'; // Mock availability check

    if (!isAvailable) {
      throw new Error('Username is already taken.');
    }

    console.log('Username is available!');
    // Perform actual form submission here
  }

  return (
    <form action={handleSubmit}>
      <label htmlFor="username">Username:</label>
      <input
        type="text"
        id="username"
        name="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Checking...' : 'Submit'}
      </button>
       <StatusComponent />
    </form>
  );
}

function StatusComponent() {
    const { pending, data, method, action } = useFormStatus();

    return (
        <p>
          {pending && "Submitting..."}
          {data && <pre>{JSON.stringify(data)}</pre>}
        </p>
    )
}

export default UsernameForm;

            

              

Copy