Apprenez rapidement useActionState avec un exemple (Next.js

Lors de l'utilisation d'un formulaire, le hook useActionState simplifie le processus de capture des valeurs du formulaire et de leur transmission à une action du serveur en tant que FormData.

useActionState gère également l'état en mettant automatiquement à jour une variable d'état avec la valeur renvoyée par l'action du serveur. Ceci est particulièrement utile pour restituer les erreurs de validation des champs de saisie, comme le montre l'exemple ci-dessous utilisant Zod.

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 renvoie également une propriété isPending (exemple) qui indique si la promesse de l'action du serveur est toujours en cours de résolution.

La référence est en attente pour désactiver temporairement les éléments du formulaire, tels qu'un bouton d'envoi, afin d'empêcher les utilisateurs de cliquer dessus plusieurs fois de suite avant la fin de l'action en cours.

useActionState contre useFormAction et useFormStatus

Si vous connaissez useFormAction et useFormStatus, vous trouverez useActionState assez similaire.

Essentiellement, il combine les fonctionnalités des deux hooks et est renommé pour refléter le fait que les actions du serveur ne sont pas uniquement destinées aux formulaires (vous pouvez également utiliser useActionState avec des boutons et d'autres éléments.)

Gardez à l'esprit que useFormStatus est obsolète depuis Next.js 15, vous devez donc importer useActionState à l'avenir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!