Hello! 欢迎来到小浪资源网！

反应服务器功能

小浪博主 2024-12-24 3

react 19 的服务器函数：在服务器端执行客户端引用的函数

本文介绍 React 19 中服务器函数的概念和使用方法。服务器函数是在客户端代码中引用，但在服务器端执行的函数。这简化了客户端与服务器端交互的流程。

以下是一个示例：

'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 name="name" type="text" />                     <button disabled={ispending} type="submit">Save</button>                 </form>                 <div>                     {error && <p>{error}</p>}                 </div>             </fieldset>         </div>     ); }

请注意 updatename 函数的导入方式：

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

updatename 函数在服务器端执行，其代码如下：

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

use server 指令告诉 React 该函数将在服务器端执行。该函数检查名称长度，少于两个字符则返回错误信息。

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

反应服务器功能