Reagieren Sie auf Serverfunktionen

Serverfunktionen sind Funktionen, auf die auf dem Client verwiesen wird, die aber auf dem Server ausgeführt werden.

Hier ist ein Beispiel:

'use client'

import { useActionState } from "react";

import { updateName } from "@/app/react-19-server-function/actions";


export default function Page() {

    const [error, submitAction, isPending] = useActionState(
        async (_previousState, formData) => {
            const error = await updateName(formData.get("name") as string);
            if (error) {
                return error;
            }

            return ""
        },
        "",
    );

    return <div>
        <h1>React 19: Server Functions</h1>
        <fieldset>
            <div>Name</div>

            <form action={submitAction}>
                <input type="text" name="name" />

                <button type="submit" disabled={isPending}>Save</button>
            </form>

            <div>
                {error && <p>{error}</p>}
            </div>
        </fieldset>
    </div>
}

Weitere Informationen zu useActionState finden Sie in meinem früheren Beitrag

Beachten Sie, wie updateName importiert wird.

import { updateName } from "@/app/react-19-server-function/actions";

und an useActionState übergeben.

Das bedeutet, dass jedes Mal, wenn das Formular gesendet wird, „submitAction“ ausgeführt wird, das dann updateName aufruft.

Jetzt schauen wir uns updateName an:

"use server";

export async function updateName(name) {
  if (name?.length < 2) {
    return "Name must be at least 2 characters.";
  }

  return "";
}

Es ist eine sehr einfache Funktion, die die Länge des Namens überprüft. Wenn es weniger als 2 Zeichen enthält, wird ein Fehler zurückgegeben. Andernfalls wird eine leere Zeichenfolge zurückgegeben, was bedeutet, dass kein Fehler vorliegt.

Zu beachten ist außerdem die Anweisung: „Server verwenden“. Dadurch wird React mitgeteilt, dass die Funktion auf dem Server ausgeführt wird, sodass eine Referenz erstellt wird, die der Client verwenden kann.

Die Benutzeroberfläche ist supereinfach und sieht so aus:

Wenn das Formular ohne Wert übermittelt wird, werden Sie eine POST-Netzwerkanfrage mit einigen interessanten Details bemerken:

• Inhaltstyp: ist Text/x-Komponente.

• Die Nutzlast wird automatisch übergeben, auch wenn sie leer ist.

• Die Antwort ist ein bisschen wie JSON.

Links

• Codebasis

Abschluss

Serverfunktionen sind Funktionen, die auf dem Server ausgeführt werden. Die Alternative besteht darin, fetch manuell zu verwenden, um eine Anfrage an das Backend zu stellen und Dinge wie das Lesen des Statuscodes und das Parsen der Nutzlast zu erledigen.

Mit Serverfunktionen müssen Sie sich nicht um den Kommunikationsteil kümmern. Erstellen Sie einfach eine Funktion mit der Direktive „use server“ und importieren Sie sie in eine Client-Datei, das Framework kümmert sich um den Rest.

Das obige ist der detaillierte Inhalt vonReagieren Sie auf Serverfunktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!