useFormStatus

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

• Справочник
  • useFormStatus()
• Использование
  • Отображение состояния ожидания при отправке формы
  • Чтение данных формы, которые отправляются
• Устранение неполадок
  • status.pending никогда не true

Справочник

useFormStatus()

Хук useFormStatus предоставляет информацию о статусе последней отправки формы.

import { useFormStatus } from "react-dom";
import action from './actions';

function Submit() {
  const status = useFormStatus();
  return <button disabled={status.pending}>Submit</button>
}

export default function App() {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

Для получения информации о статусе, компонент Submit должен быть рендерен внутри <form>. Хук возвращает информацию, такую как свойство pending, которое указывает, активно ли отправляется форма.

В приведенном выше примере Submit использует эту информацию, чтобы отключить <button> нажатия во время отправки формы.

См. дополнительные примеры ниже.

Параметры

useFormStatus не принимает никаких параметров.

Возвращаемые значения

Объект status со следующими свойствами:

• pending: Булево значение. Если true, это означает, что родительская <form> находится в состоянии ожидания отправки. В противном случае, false.

• data: Объект, реализующий FormData interface, содержащий данные, которые родительская <form> отправляет. Если нет активной отправки или нет родительской <form>, то это будет null.

• method: Строковое значение, равное 'get' или 'post'. Это указывает, отправляет ли родительская <form> данные с методом GET или POST HTTP. По умолчанию <form> использует метод GET и может быть задан свойством method.

• action: Ссылка на функцию, переданную в свойство action родительского <form>. Если нет родительского <form>, свойство будет null. Если в свойстве action указан URI или не указано свойство action, то status.action будет null.

Ограничения

• Хук useFormStatus должен вызываться из компонента, который рендерится внутри <form>.
• useFormStatus вернёт информацию о статусе только для родительской <form>. Он не вернёт информацию о статусе для любого <form> рендера внутри этого компонента или его дочерних элементов.

Использование

Отображение состояния ожидания при отправке формы

Для отображения состояния ожидания во время отправки формы, вы можете вызвать хук useFormStatus в компоненте, рендерящемся внутри <form>, и прочитать свойство pending.

Здесь мы используем свойство pending для обозначения отправки формы.

import { useFormStatus } from "react-dom";
import { submitForm } from "./actions.js";

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
}

function Form({ action }) {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

export default function App() {
  return <Form action={submitForm} />;
}

function Form() {
  // 🚩 `pending` will never be true
  // useFormStatus does not track the form rendered in this component
  const { pending } = useFormStatus();
  return <form action={submit}></form>;
}

function Submit() {
  // ✅ `pending` will be derived from the form that wraps the Submit component
  const { pending } = useFormStatus(); 
  return <button disabled={pending}>...</button>;
}

function Form() {
  // This is the <form> `useFormStatus` tracks
  return (
    <form action={submit}>
      <Submit />
    </form>
  );
}

Чтение данных формы, которые отправляются

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

Здесь у нас есть форма, где пользователи могут запросить имя пользователя. Мы можем использовать useFormStatus для отображения временного сообщения статуса, подтверждающего запрашиваемое имя пользователя.

import {useState, useMemo, useRef} from 'react';
import {useFormStatus} from 'react-dom';

export default function UsernameForm() {
  const {pending, data} = useFormStatus();

  return (
    <div>
      <h3>Request a Username: </h3>
      <input type="text" name="username" disabled={pending}/>
      <button type="submit" disabled={pending}>
        Submit
      </button>
      <br />
      <p>{data ? `Requesting ${data?.get("username")}...`: ''}</p>
    </div>
  );
}

Устранение неполадок

status.pending никогда не true

useFormStatus вернёт информацию о статусе только для родительской <form>.

Если компонент, вызывающий useFormStatus не вложен в <form>, status.pending всегда будет возвращать false. Убедитесь, что useFormStatus вызывается в компоненте, являющемся дочерним элементом <form>.

useFormStatus не отслеживает статус <form> в том же компоненте. См. Проблему для получения дополнительной информации.