React Nouveau crochet useActionState

Habituellement, lorsque vous travaillez avec un formulaire, vous souhaitez :

a) Afficher un chargeur

b) Afficher les erreurs de validation

Cela signifie souvent gérer quelques variables d'état. Mais avec le nouveau hook useActionState introduit dans React 19, il existe désormais un moyen plus simple de le gérer.

Links

• Démo

• Base de code

React Hook : useActionState

Dans l'extrait suivant, remarquez comment useActionState est utilisé :

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

Quelques choses à mentionner :

• useActionState renvoie trois choses :

1. La première variable, error, concerne les erreurs. Dans ce cas, il s’agit d’une chaîne, mais elle peut vraiment être de n’importe quel type.

2. La deuxième variable, submitAction, est une fonction qui déclenche la soumission du formulaire.

3. La troisième variable, isPending, est un booléen qui indique l'état en attente. C'est utile pour désactiver des éléments ou afficher une icône lorsque le formulaire est soumis.

• useActionState attend deux paramètres :

1. Le premier paramètre est la fonction qui est déclenchée par submitAction lorsque le formulaire est soumis.

2. Le deuxième paramètre est la valeur initiale de l'erreur. Dans ce cas, il s'agit d'une chaîne vide, mais vous pouvez utiliser quelque chose comme « remplir tous les champs » à la place.

• useActionState fournit formData, qui est une instance de FormData, essentiellement un objet qui représente les champs du formulaire.

Champ de saisie sous le formulaire :

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

Peut être lu ainsi :

formData.get("name");

name est le nom du champ de saisie.

• error affichera toute erreur du serveur. S'il n'y en a pas, il sera vide.

• isPending est automatiquement mis à jour par le hook sur true lorsque le formulaire est soumis et redéfini sur false une fois la réponse du backend reçue.

s'il n'y a pas d'erreur, useActionState gère également la réinitialisation du formulaire.

Demande au backend

Pour cette démo, la fonction updateName est assez basique, elle fait simplement une requête POST au backend, en passant le nom. Si le backend renvoie une erreur, la fonction la renvoie ; sinon, il renvoie une chaîne vide, ce qui signifie qu'il n'y a eu aucune erreur du serveur.

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

Gestionnaire de requêtes POST back-end

J'utilise une simple fonction lambda qui vérifie simplement si le nom est une chaîne d'au moins 2 caractères. Il y a aussi un délai de 2 secondes, juste pour donner à l'interface utilisateur un peu de temps pour afficher le spinner.

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

Conclusion

Le hook useActionState de React 19 est utile lorsque vous traitez deux éléments que vous devriez toujours avoir dans un formulaire : un état en attente et des erreurs de validation. Le hook se charge de mettre à jour ces "variables d'état" et fournit même une référence à previousState si vous souhaitez comparer les valeurs.

Ce qui se passe une fois le formulaire soumis et qu'aucune erreur n'est renvoyée dépend de la candidature. Dans la plupart des cas, cela signifie rediriger l'utilisateur vers une autre page ou afficher un message de réussite.

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!