React Neuer Hook useActionState

Normalerweise möchten Sie bei der Arbeit mit einem Formular Folgendes tun:

a) Einen Lader anzeigen

b) Validierungsfehler anzeigen

Dies erfordert oft die Verwaltung einiger Zustandsvariablen. Aber mit dem neuen useActionState-Hook, der in React 19 eingeführt wurde, gibt es jetzt eine einfachere Möglichkeit, damit umzugehen.

Links

• Demo

• Codebasis

React Hook: useActionState

Beachten Sie im folgenden Snippet, wie useActionState verwendet wird:

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

Ein paar Dinge zu erwähnen:

• useActionState gibt drei Dinge zurück:

1. Die erste Variable, Fehler, steht für Fehler. In diesem Fall handelt es sich um eine Zeichenfolge, aber es könnte wirklich jeder Typ sein.

2. Die zweite Variable, subscribeAction, ist eine Funktion, die die Formularübermittlung auslöst.

3. Die dritte Variable, isPending, ist ein boolescher Wert, der den ausstehenden Status angibt. Dies ist nützlich, um Elemente zu deaktivieren oder einen Spinner anzuzeigen, wenn das Formular gesendet wird.

• useActionState erwartet zwei Parameter:

1. Der erste Parameter ist die Funktion, die von SubmitAction ausgelöst wird, wenn das Formular gesendet wird.

2. Der zweite Parameter ist der Anfangswert für den Fehler. In diesem Fall handelt es sich um eine leere Zeichenfolge, aber Sie könnten stattdessen auch etwas wie „Alle Felder ausfüllen“ verwenden.

• useActionState stellt formData bereit, eine Instanz von FormData, im Grunde ein Objekt, das die Felder im Formular darstellt.

Eingabefeld im Formular:

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

Kann so gelesen werden:

formData.get("name");

Name ist der Name des Eingabefelds.

• Fehler zeigt alle Fehler vom Server an. Wenn keine vorhanden ist, ist es leer.

• isPending wird vom Hook automatisch auf „true“ aktualisiert, wenn das Formular gesendet wird, und auf „false“ zurückgesetzt, sobald die Backend-Antwort empfangen wird.

Wenn kein Fehler vorliegt, übernimmt useActionState auch das Zurücksetzen des Formulars.

Anfrage an das Backend

Für diese Demo ist die updateName-Funktion ziemlich einfach, sie stellt lediglich eine POST-Anfrage an das Backend und übergibt den Namen. Wenn das Backend einen Fehler zurückgibt, gibt die Funktion ihn zurück. Andernfalls wird eine leere Zeichenfolge zurückgegeben, was bedeutet, dass kein Fehler vom Server aufgetreten ist.

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

Backend-POST-Anfrage-Handler

Ich verwende eine einfache Lambda-Funktion, die lediglich prüft, ob der Name eine Zeichenfolge mit mindestens 2 Zeichen ist. Es gibt auch eine Verzögerung von 2 Sekunden, um der Benutzeroberfläche etwas Zeit zu geben, den Spinner anzuzeigen.

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

Abschluss

Der useActionState-Hook von React 19 ist hilfreich, wenn es um zwei Dinge geht, die Sie immer in einem Formular haben sollten: einen ausstehenden Status und Validierungsfehler. Der Hook kümmert sich um die Aktualisierung dieser „Zustandsvariablen“ und stellt sogar einen Verweis auf previousState bereit, wenn Sie Werte vergleichen möchten.

Was passiert, nachdem das Formular gesendet wurde und kein Fehler zurückgegeben wird, liegt in der Verantwortung des Antrags. In den meisten Fällen bedeutet dies, dass der Benutzer auf eine andere Seite weitergeleitet oder eine Erfolgsmeldung angezeigt wird.

Das obige ist der detaillierte Inhalt vonReact Neuer Hook useActionState. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!