Fungsi Pelayan React

Fungsi Pelayan ialah fungsi yang dirujuk pada klien tetapi dilaksanakan pada pelayan.

Ini contohnya:

'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>
}

Semak siaran saya yang terdahulu untuk mendapatkan butiran lanjut tentang useActionState

Perhatikan cara updateName diimport.

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

dan diserahkan kepada useActionState.

Ini bermakna setiap kali borang diserahkan, ia menjalankan submitAction, yang kemudiannya memanggil updateName.

Sekarang, mari lihat updateName:

"use server";

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

  return "";
}

Ia adalah fungsi yang sangat mudah yang menyemak panjang nama. Jika ia mempunyai kurang daripada 2 aksara, ia mengembalikan ralat; jika tidak, ia mengembalikan rentetan kosong, bermakna tiada ralat.

Perkara lain yang perlu diberi perhatian ialah arahan: "gunakan pelayan". Ini memberitahu React fungsi akan dilaksanakan pada pelayan, jadi ia mencipta rujukan yang boleh digunakan oleh pelanggan.

UI adalah sangat mudah dan kelihatan seperti ini:

Jika borang diserahkan tanpa sebarang nilai, anda akan melihat permintaan rangkaian POST dengan beberapa butiran menarik:

• jenis kandungan: ialah teks/x-komponen.

• Muatan dihantar secara automatik, walaupun ia kosong.

• Respons adalah seperti JSON.

Pautan

• Pangkalan kod

Kesimpulan

Fungsi Pelayan ialah fungsi yang dijalankan pada pelayan. Alternatifnya ialah menggunakan fetch secara manual untuk membuat permintaan ke bahagian belakang dan mengendalikan perkara seperti membaca kod status dan menghuraikan muatan.

Dengan Fungsi Pelayan, anda tidak perlu risau tentang bahagian komunikasi. Hanya buat fungsi dengan arahan "guna pelayan" dan importnya ke dalam fail klien, rangka kerja menguruskan yang lain.

Atas ialah kandungan terperinci Fungsi Pelayan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!