服務(wù)器函數(shù)是在客戶端引用但在服務(wù)器上執(zhí)行的函數(shù)。

這是一個(gè)例子：

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

查看我之前的帖子，了解有關(guān) useActionState 的更多詳細(xì)信息

注意 updateName 是如何導(dǎo)入的。

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

并傳遞給useActionState。

這意味著每當(dāng)提交表單時(shí)，它都會(huì)運(yùn)行submitAction，然后調(diào)用updateName。

現(xiàn)在，讓我們看看 updateName:

"use server";

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

  return "";
}

這是一個(gè)非常簡單的函數(shù)，用于檢查名稱的長度。如果少于2個(gè)字符，則返回錯(cuò)誤；否則，它返回一個(gè)空字符串，意味著沒有錯(cuò)誤。

另一件事要注意的是指令：“使用服務(wù)器”。這告訴 React 該函數(shù)將在服務(wù)器上執(zhí)行，因此它創(chuàng)建了客戶端可以使用的引用。

用戶界面非常簡單，如下所示：

如果提交的表單沒有任何值，您會(huì)注意到一個(gè) POST 網(wǎng)絡(luò)請(qǐng)求，其中包含一些有趣的詳細(xì)信息：

• 內(nèi)容類型：是文本/x-組件。

• 有效負(fù)載會(huì)自動(dòng)傳遞，即使它是空的。

• 響應(yīng)有點(diǎn)像 JSON。

鏈接

• 代碼庫

結(jié)論

服務(wù)器函數(shù)是在服務(wù)器上運(yùn)行的函數(shù)。另一種方法是手動(dòng)使用 fetch 向后端發(fā)出請(qǐng)求并處理諸如讀取狀態(tài)代碼和解析有效負(fù)載之類的事情。

使用服務(wù)器功能，您無需擔(dān)心通信部分。只需使用“use server”指令創(chuàng)建一個(gè)函數(shù)并將其導(dǎo)入客戶端文件，框架就會(huì)處理剩下的事情。

以上是反應(yīng)服務(wù)器功能的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！