React New hook useActionState

Biasanya, apabila bekerja dengan borang, anda ingin:

a) Paparkan pemuat

b) Tunjukkan ralat pengesahan

Ini selalunya bermakna mengurus beberapa pembolehubah keadaan. Tetapi dengan cangkuk useActionState baharu yang diperkenalkan dalam React 19, kini terdapat cara yang lebih mudah untuk mengendalikannya.

Pautan

• Demo

• Pangkalan kod

React Hook: useActionState

Dalam coretan berikut, perhatikan cara useActionState digunakan:

import { useActionState } from "react";
import Loader from "@/components/loader";

function Form() {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));

      if (error) {
        return error;
      }

      return "";
    },
    ""
  );

  return (
    <form action={submitAction}>
      Name: <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        Save
      </button>
      {isPending && <Loader />}
      {error && <p>{error}</p>}
    </form>
  );
}

Beberapa perkara untuk disebut:

• useActionState mengembalikan tiga perkara:

1. Pembolehubah pertama, ralat, adalah untuk ralat. Dalam kes ini, ia adalah rentetan, tetapi ia boleh menjadi apa-apa jenis.

2. Pembolehubah kedua, submitAction, ialah fungsi yang mencetuskan penyerahan borang.

3. Pembolehubah ketiga, isPending, ialah boolean yang menunjukkan keadaan belum selesai. Ia berguna untuk melumpuhkan elemen atau menunjukkan pemutar semasa borang diserahkan.

• useActionState menjangkakan dua parameter:

1. Parameter pertama ialah fungsi yang dicetuskan oleh submitAction apabila borang diserahkan.

2. Parameter kedua ialah nilai awal untuk ralat. Dalam kes ini, ia adalah rentetan kosong, tetapi anda boleh menggunakan sesuatu seperti "isi semua medan" sebaliknya.

• useActionState menyediakan formData, yang merupakan contoh FormData, pada asasnya, objek yang mewakili medan dalam borang.

Medan input dalam borang:

<input type="text" name="name" />

Boleh baca begini:

formData.get("name");

nama ialah nama medan input.

• ralat akan memaparkan sebarang ralat daripada pelayan. Jika tiada, ia akan kosong.

• isPending dikemas kini secara automatik oleh cangkuk kepada benar apabila borang diserahkan dan ditetapkan semula kepada palsu sebaik sahaja respons bahagian belakang diterima.

jika tiada ralat, useActionState turut mengendalikan penetapan semula borang.

Minta kepada Bahagian Belakang

Untuk demo ini, fungsi updateName adalah agak asas, ia hanya membuat permintaan POST ke bahagian belakang, menghantar nama. Jika bahagian belakang mengembalikan ralat, fungsi itu mengembalikannya; jika tidak, ia mengembalikan rentetan kosong, bermakna tiada ralat daripada pelayan.

async function updateName(name) {
  const response = await fetch("/lambda-function", {
    method: "POST",
    body: JSON.stringify({ name }),
  });

  if (!response.ok) {
    const { message } = await response.json();
    return message;
  }

  return "";
}

Pengendali permintaan POST hujung belakang

Saya menggunakan fungsi lambda ringkas yang hanya menyemak sama ada nama itu adalah rentetan dengan sekurang-kurangnya 2 aksara. Terdapat juga kelewatan 2 saat, hanya untuk memberi UI sedikit masa untuk menunjukkan pemutar.

import { useActionState } from "react";
import Loader from "@/components/loader";

function Form() {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));

      if (error) {
        return error;
      }

      return "";
    },
    ""
  );

  return (
    <form action={submitAction}>
      Name: <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        Save
      </button>
      {isPending && <Loader />}
      {error && <p>{error}</p>}
    </form>
  );
}

Kesimpulan

Kait useActionState React 19 membantu apabila berurusan dengan dua perkara yang anda perlu sentiasa ada dalam bentuk: keadaan belum selesai dan ralat pengesahan. Cangkuk mengambil berat mengemas kini "pembolehubah keadaan" itu dan juga menyediakan rujukan kepada previousState jika anda ingin membandingkan nilai.

Apa yang berlaku selepas borang diserahkan dan tiada ralat dikembalikan terpulang kepada permohonan. Dalam kebanyakan kes, ini bermakna mengubah hala pengguna ke halaman lain atau menunjukkan mesej kejayaan.

Atas ialah kandungan terperinci React New hook useActionState. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!