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

這是一個例子：

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

查看我之前的帖子，以了解有關 useActionState 的更多詳細資訊

注意 updateName 是如何導入的。

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

並傳遞給useActionState。

這表示每當提交表單時，它都會執(zhí)行submitAction，然後呼叫updateName。

現在，讓我們來看看 updateName:

"use server";

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

  return "";
}

這是一個非常簡單的函數，用來檢查名稱的長度。如果少於2個字符，則返回錯誤；否則，它返回一個空字串，表示沒有錯誤。

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

使用者介面非常簡單，如下：

如果提交的表單沒有任何值，您會注意到一個 POST 網路請求，其中包含一些有趣的詳細資訊：

• 內容類型：是文字/x-元件。

• 有效負載會自動傳遞，即使它是空的。

• 回應有點像 JSON。

連結

• 程式碼庫

結論

伺服器函數是在伺服器上運行的函數。另一種方法是手動使用 fetch 向後端發(fā)出請求並處理諸如讀取狀態(tài)程式碼和解析有效負載之類的事情。

使用伺服器功能，您無需擔心通訊部分。只需使用“use server”命令建立函數並將其導入客戶端文件，框架就會處理剩下的事情。

以上是反應伺服器功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！