反应服务器功能

服务器函数是在客户端引用但在服务器上执行的函数。

这是一个例子：

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

这意味着每当提交表单时，它都会运行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 该函数将在服务器上执行，因此它创建了客户端可以使用的引用。

用户界面非常简单，如下所示：

如果提交的表单没有任何值，您会注意到一个 POST 网络请求，其中包含一些有趣的详细信息：

• 内容类型：是文本/x-组件。

• 有效负载会自动传递，即使它是空的。

• 响应有点像 JSON。

链接

• 代码库

结论

服务器函数是在服务器上运行的函数。另一种方法是手动使用 fetch 向后端发出请求并处理诸如读取状态代码和解析有效负载之类的事情。

使用服务器功能，您无需担心通信部分。只需使用“use server”指令创建一个函数并将其导入客户端文件，框架就会处理剩下的事情。

以上是反应服务器功能的详细内容。更多信息请关注PHP中文网其他相关文章！