Lernen Sie useActionState schnell anhand eines Beispiels (Next.js

Bei der Verwendung eines Formulars vereinfacht der useActionState-Hook den Prozess der Erfassung von Formularwerten und deren Übergabe an eine Serveraktion als FormData.

useActionState verwaltet auch den Status, indem es automatisch eine Statusvariable mit dem von der Serveraktion zurückgegebenen Wert aktualisiert. Dies ist besonders hilfreich beim Rendern von Eingabefeld-Validierungsfehlern, wie im folgenden Beispiel mit Zod gezeigt.

form.tsx:

"use client";

import { useActionState } from "react";
import { signUp } from "../actions";

export default function SignUp() {
  const [state, action] = useActionState(signUp, {});

  return (
    <form action={action}>
      <div>
        <label htmlFor="username">Username:</label>
        <input
          type="text"
         >



<p>actions.ts:<br>
</p>

<pre class="brush:php;toolbar:false">"use server";

import { z } from "zod";

const SignUpSchema = z.object({
  username: z.string(),
  password: z
    .string()
    .min(8, { message: "Be at least 8 characters long" })
    .regex(/[a-zA-Z]/, { message: "Contain at least one letter." })
    .regex(/[0-9]/, { message: "Contain at least one number." })
    .regex(/[^a-zA-Z0-9]/, {
      message: "Contain at least one special character.",
    })
    .trim(),
});

export type SignUpActionState = {
  username?: string;
  password?: string;
  errors?: {
    username?: string[];
    password?: string[];
  };
};

export async function signUp(
  _prevState: SignUpActionState,
  form: FormData
): Promise<SignUpActionState> {
  const username = form.get("username") as string;
  const password = form.get("password") as string;

  const validatedFields = SignUpSchema.safeParse({
    username,
    password,
  });

  if (!validatedFields.success) {
    return {
      username,
      password,
      errors: validatedFields.error.flatten().fieldErrors,
    };
  }

  // process validated form inputs here

  return { username, password };
}

useActionState gibt außerdem eine isPending-Eigenschaft (Beispiel) zurück, die angibt, ob das Versprechen der Serveraktion noch aufgelöst wird.

Referenz isPending, um Formularelemente, wie z. B. eine Senden-Schaltfläche, vorübergehend zu deaktivieren, um zu verhindern, dass Benutzer mehrmals schnell hintereinander darauf klicken, bevor die laufende Aktion abgeschlossen ist.

useActionState vs. useFormAction und useFormStatus

Wenn Sie mit useFormAction und useFormStatus vertraut sind, werden Sie useActionState ziemlich ähnlich finden.

Im Wesentlichen kombiniert es die Funktionalität beider Hooks und wurde umbenannt, um zu verdeutlichen, dass Serveraktionen nicht nur für Formulare gelten (Sie können useActionState auch mit Schaltflächen und anderen Elementen verwenden.)

Beachten Sie, dass useFormStatus ab Next.js 15 veraltet ist. Sie sollten daher useActionState künftig importieren.

Das obige ist der detaillierte Inhalt vonLernen Sie useActionState schnell anhand eines Beispiels (Next.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!