Referensi API
Hook

useFormStatus

useFormStatus adalah Hook yang memberi Anda informasi state pengiriman form terakhir.

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

Referensi

useFormStatus()

Hook useFormStatus memberikan informasi state pengiriman form terakhir.

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>
  );
}

Untuk mendapatkan informasi state, komponen Submit harus di-render dalam <form>. Hook mengembalikan informasi seperti properti pending yang memberi tahu Anda apakah form sedang aktif dikirimkan.

Pada contoh di atas, Submit menggunakan informasi ini untuk menonaktifkan penekanan <button> ketika form dikirimkan.

Lihat lebih banyak contoh di bawah.

Parameter

useFormStatus tidak menerima parameter apapun.

Kembalian

Objek status dengan properti berikut:

  • pending: Sebuah boolean. Jika true, ini berarti <form> induk sedang menunggu pengiriman. Jika tidak, false.

  • data: Objek yang mengimplementasikan FormData interface yang berisi data yang dikirimkan oleh <form> induk. Jika tidak ada kiriman atau tidak ada induk <form>, maka akan menjadi null.

  • method: Nilai string dari 'get' atau 'post'. Ini menunjukkan apakah <form> induk mengirimkan dengan metode HTTP GET atau POST. Secara default, <form> akan menggunakan metode GET dan dapat ditentukan oleh properti method.

  • action: Referensi fungsi yang diteruskan ke prop action pada <form> induk. Jika tidak ada <form> induk, propertinya adalah null. Jika ada URI yang diberikan ke prop action, atau tidak ada prop action yang ditentukan, status.action akan menjadi null.

Catatan Penting

  • Hook useFormStatus harus dipanggil dari komponen yang di-render di dalam <form>.
  • useFormStatus hanya akan mengembalikan informasi status untuk <form> induk. Ini tidak akan mengembalikan informasi status untuk <form> apapun yang di-render dalam komponen yang sama atau komponen anak.

Penggunaan

Menampilkan state tertunda selama pengiriman form

Untuk menampilkan state tertunda saat form dikirimkan, Anda dapat memanggil Hook useFormStatus dalam komponen yang di-render dalam <form> dan membaca properti pending yang dikembalikan.

Di sini, kami menggunakan properti pending untuk menunjukkan bahwa form sedang dikirimkan.

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} />;
}

Sandungan

useFormStatus tidak akan mengembalikan informasi status untuk <form> yang di-render dalam komponen yang sama.

Hook useFormStatus hanya mengembalikan informasi status untuk <form> induk dan bukan untuk <form> apa pun yang di-render dalam komponen yang sama yang memanggil Hook, atau komponen anak.

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>;
}

Seharusnya panggil useFormStatus dari dalam komponen yang terletak di dalam <form>.

function Submit() {
  // ✅ `pending` akan diturunkan dari form yang membungkus komponen Submit
  const { pending } = useFormStatus(); 
  return <button disabled={pending}>...</button>;
}

function Form() {
  // Ini adalah <form> yang dipantau oleh `useFormStatus`
  return (
    <form action={submit}>
      <Submit />
    </form>
  );
}

Membaca data form yang dikirimkan

Anda dapat menggunakan properti data dari informasi status yang dikembalikan dari useFormStatus untuk menampilkan data apa yang dikirimkan oleh pengguna.

Di sini, kita memiliki form di mana pengguna dapat meminta nama pengguna. Kita dapat menggunakan useFormStatus untuk menampilkan pesan status sementara yang menginformasikan nama pengguna yang mereka minta.

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>
  );
}

Pemecahan masalah

status.pending tidak pernah true

useFormStatus hanya akan mengembalikan informasi status untuk <form> induk.

Jika komponen yang memanggil useFormStatus tidak disarangkan dalam <form>, status.pending akan selalu mengembalikan false. Pastikan useFormStatus dipanggil dalam komponen yang merupakan turunan dari elemen <form>.

useFormStatus tidak akan melacak status <form> yang di-render dalam komponen yang sama. Lihat Sandungan untuk lebih detail.

SebelumnyaHook
SelanjutnyaKomponen