{"id":220,"date":"2026-07-30T09:25:13","date_gmt":"2026-07-30T01:25:13","guid":{"rendered":"https:\/\/yykcj.com\/?p=220"},"modified":"2026-07-30T09:25:13","modified_gmt":"2026-07-30T01:25:13","slug":"react-server-actions-%e5%85%a5%e9%97%a8%e4%b8%8e%e8%bf%9b%e9%98%b6%ef%bc%9a%e4%bb%8e%e8%a1%a8%e5%8d%95%e5%a4%84%e7%90%86%e5%88%b0%e6%95%b0%e6%8d%ae%e7%aa%81%e5%8f%98%e7%9a%84%e6%9c%80%e4%bd%b3-2","status":"publish","type":"post","link":"https:\/\/yykcj.com\/?p=220","title":{"rendered":"React Server Actions \u5165\u95e8\u4e0e\u8fdb\u9636\uff1a\u4ece\u8868\u5355\u5904\u7406\u5230\u6570\u636e\u7a81\u53d8\u7684\u6700\u4f73\u5b9e\u8df5"},"content":{"rendered":"

\u524d\u8a00<\/h2>\n

React Server Actions \u662f React 19 \u5f15\u5165\u7684\u4e00\u4e2a\u91cd\u78c5\u7279\u6027\uff0c\u5b83\u5141\u8bb8\u6211\u4eec\u5728\u5ba2\u6237\u7aef\u7ec4\u4ef6\u4e2d\u76f4\u63a5\u8c03\u7528\u670d\u52a1\u7aef\u51fd\u6570\uff0c\u800c\u65e0\u9700\u624b\u52a8\u7f16\u5199 API \u8def\u7531\u3002\u8fd9\u6781\u5927\u7b80\u5316\u4e86\u6570\u636e\u7a81\u53d8\uff08Mutation\uff09\u7684\u6d41\u7a0b\uff0c\u5c24\u5176\u662f\u8868\u5355\u63d0\u4ea4\u3001\u6570\u636e\u66f4\u65b0\u7b49\u64cd\u4f5c\u3002\u7136\u800c\uff0c\u8bb8\u591a\u5f00\u53d1\u8005\u5bf9 Server Actions \u7684\u7406\u89e3\u505c\u7559\u5728\u8868\u9762\uff0c\u5bb9\u6613\u9677\u5165\u201c\u8fc7\u5ea6\u4f7f\u7528\u201d\u6216\u201c\u9519\u8bef\u4f7f\u7528\u201d\u7684\u9677\u9631\u3002\u672c\u6587\u5c06\u5e26\u4f60\u4ece\u96f6\u5f00\u59cb\uff0c\u6df1\u5165\u7406\u89e3 Server Actions \u7684\u539f\u7406\u3001\u4f7f\u7528\u573a\u666f\u4ee5\u53ca\u8fdb\u9636\u6280\u5de7\u3002<\/p>\n

\u4ec0\u4e48\u662f Server Actions\uff1f<\/h2>\n

\u7b80\u5355\u6765\u8bf4\uff0cServer Actions \u662f\u5b9a\u4e49\u5728\u670d\u52a1\u7aef\u7684\u5f02\u6b65\u51fd\u6570\uff0c\u53ef\u4ee5\u5728\u5ba2\u6237\u7aef\u7ec4\u4ef6\u4e2d\u901a\u8fc7 \"use server\"<\/code> \u6307\u4ee4\u8c03\u7528\u3002\u5b83\u4eec\u76f4\u63a5\u8fd0\u884c\u5728\u670d\u52a1\u7aef\uff0c\u53ef\u4ee5\u5b89\u5168\u5730\u8bbf\u95ee\u6570\u636e\u5e93\u3001\u6587\u4ef6\u7cfb\u7edf\u7b49\u8d44\u6e90\uff0c\u800c\u65e0\u9700\u66b4\u9732 API \u7aef\u70b9\u3002<\/p>\n

\u57fa\u672c\u7528\u6cd5<\/h3>\n

\u9996\u5148\uff0c\u521b\u5efa\u4e00\u4e2a Server Action \u6587\u4ef6\uff08\u4f8b\u5982 app\/actions.ts<\/code>\uff09\uff1a<\/p>\n

\n\/\/ app\/actions.ts\n"use server";\n\nimport { revalidatePath } from "next\/cache";\n\nexport async function createUser(formData: FormData) {\n  const name = formData.get("name");\n  const email = formData.get("email");\n  \n  \/\/ \u6a21\u62df\u6570\u636e\u5e93\u64cd\u4f5c\n  console.log(`Creating user: ${name}, ${email}`);\n  \n  \/\/ \u91cd\u65b0\u9a8c\u8bc1\u8def\u5f84\u4ee5\u5237\u65b0\u6570\u636e\n  revalidatePath("\/users");\n  \n  return { success: true };\n}\n<\/code><\/pre>\n
\u7136\u540e\u5728\u5ba2\u6237\u7aef\u7ec4\u4ef6\u4e2d\u4f7f\u7528\u5b83\uff1a<\/p>\n
\n\/\/ app\/page.tsx\n"use client";\n\nimport { createUser } from ".\/actions";\n\nexport default function Home() {\n  return (\n    <form action={createUser}>\n      <input name="name" placeholder="Name" required \/>\n      <input name="email" type="email" placeholder="Email" required \/>\n      <button type="submit">Create User<\/button>\n    <\/form>\n  );\n}\n<\/code><\/pre>\n
\u6ce8\u610f<\/strong>\uff1a\u8868\u5355\u7684 action<\/code> \u5c5e\u6027\u53ef\u4ee5\u76f4\u63a5\u63a5\u6536 Server Action \u51fd\u6570\uff0cReact \u4f1a\u81ea\u52a8\u5904\u7406\u63d0\u4ea4\u5e76\u663e\u793a\u52a0\u8f7d\u72b6\u6001\u3002<\/p>\n
\u8fdb\u9636\u7528\u6cd5\u4e0e\u6700\u4f73\u5b9e\u8df5<\/h2>\n
1. \u5904\u7406\u52a0\u8f7d\u72b6\u6001\u4e0e\u9519\u8bef<\/h3>\n
Server Actions \u672c\u8eab\u4e0d\u63d0\u4f9b\u52a0\u8f7d\u72b6\u6001\uff0c\u4f46\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528 useFormStatus<\/code> \u548c useFormState<\/code> \u94a9\u5b50\u6765\u589e\u5f3a\u4f53\u9a8c\u3002<\/p>\n
\n"use client";\n\nimport { useFormStatus } from "react-dom";\nimport { createUser } from ".\/actions";\n\nfunction SubmitButton() {\n  const { pending } = useFormStatus();\n  return (\n    <button type="submit" disabled={pending}>\n      {pending ? "Creating..." : "Create User"}\n    <\/button>\n  );\n}\n\nexport default function Home() {\n  return (\n    <form action={createUser}>\n      <input name="name" placeholder="Name" required \/>\n      <input name="email" type="email" placeholder="Email" required \/>\n      <SubmitButton \/>\n    <\/form>\n  );\n}\n<\/code><\/pre>\n
\u5bf9\u4e8e\u9519\u8bef\u5904\u7406\uff0c\u53ef\u4ee5\u4f7f\u7528 useFormState<\/code>\uff1a<\/p>\n
\n"use client";\n\nimport { useFormState } from "react-dom";\nimport { createUser } from ".\/actions";\n\nconst initialState = { message: null };\n\nfunction Form() {\n  const [state, formAction] = useFormState(createUser, initialState);\n  \n  return (\n    <form action={formAction}>\n      <input name="name" placeholder="Name" required \/>\n      <input name="email" type="email" placeholder="Email" required \/>\n      <button type="submit">Create User<\/button>\n      {state?.message && <p>{state.message}<\/p>}\n    <\/form>\n  );\n}\n<\/code><\/pre>\n
\u5bf9\u5e94\u7684 Server Action \u9700\u8981\u8fd4\u56de\u4e00\u4e2a\u72b6\u6001\u5bf9\u8c61\uff1a<\/p>\n
\n"use server";\n\nexport async function createUser(prevState: any, formData: FormData) {\n  try {\n    \/\/ \u6a21\u62df\u6570\u636e\u5e93\u64cd\u4f5c\u53ef\u80fd\u5931\u8d25\n    const name = formData.get("name");\n    if (!name) throw new Error("Name is required");\n    \n    return { message: "User created successfully" };\n  } catch (error) {\n    return { message: error.message };\n  }\n}\n<\/code><\/pre>\n
2. \u53c2\u6570\u9a8c\u8bc1\u4e0e\u7c7b\u578b\u5b89\u5168<\/h3>\n
Server Actions \u63a5\u6536\u7684\u53c2\u6570\u53ef\u4ee5\u662f FormData \u6216\u666e\u901a\u5bf9\u8c61\u3002\u63a8\u8350\u4f7f\u7528 zod<\/code> \u8fdb\u884c\u9a8c\u8bc1\uff1a<\/p>\n
\n"use server";\n\nimport { z } from "zod";\n\nconst schema = z.object({\n  name: z.string().min(2),\n  email: z.string().email(),\n});\n\nexport async function createUser(prevState: any, formData: FormData) {\n  const validatedFields = schema.safeParse({\n    name: formData.get("name"),\n    email: formData.get("email"),\n  });\n  \n  if (!validatedFields.success) {\n    return {\n      errors: validatedFields.error.flatten().fieldErrors,\n    };\n  }\n  \n  \/\/ \u5b89\u5168\u5730\u4f7f\u7528 validatedFields.data\n  console.log(validatedFields.data);\n  \n  return { message: "Success" };\n}\n<\/code><\/pre>\n
3. \u4e0e\u7b2c\u4e09\u65b9\u5e93\u96c6\u6210\uff08\u5982 Prisma\uff09<\/h3>\n
Server Actions \u53ef\u4ee5\u76f4\u63a5\u8c03\u7528 Prisma\uff1a<\/p>\n
\n"use server";\n\nimport { prisma } from "@\/lib\/prisma";\nimport { revalidatePath } from "next\/cache";\n\nexport async function addTodo(formData: FormData) {\n  const title = formData.get("title") as string;\n  \n  await prisma.todo.create({\n    data: { title },\n  });\n  \n  revalidatePath("\/todos");\n}\n<\/code><\/pre>\n
\u6ce8\u610f<\/strong>\uff1a\u786e\u4fdd Prisma \u5ba2\u6237\u7aef\u5728\u670d\u52a1\u7aef\u521d\u59cb\u5316\uff0c\u4e0d\u8981\u5728\u5ba2\u6237\u7aef\u5bfc\u5165\u3002<\/p>\n
4. \u6e10\u8fdb\u589e\u5f3a\u4e0e\u4e50\u89c2\u66f4\u65b0<\/h3>\n
Server Actions \u5929\u7136\u652f\u6301\u6e10\u8fdb\u589e\u5f3a\uff08\u5373\u4f7f JavaScript \u672a\u52a0\u8f7d\uff0c\u8868\u5355\u4e5f\u80fd\u63d0\u4ea4\uff09\u3002\u5bf9\u4e8e\u66f4\u597d\u7684\u7528\u6237\u4f53\u9a8c\uff0c\u53ef\u4ee5\u4f7f\u7528\u4e50\u89c2\u66f4\u65b0\uff1a<\/p>\n
\n"use client";\n\nimport { useOptimistic } from "react";\nimport { addTodo } from ".\/actions";\n\nexport default function TodoList({ todos }) {\n  const [optimisticTodos, addOptimisticTodo] = useOptimistic(\n    todos,\n    (state, newTodo) => [...state, newTodo]\n  );\n  \n  async function formAction(formData) {\n    const title = formData.get("title");\n    addOptimisticTodo({ id: Date.now(), title, completed: false });\n    await addTodo(formData);\n  }\n  \n  return (\n    <form action={formAction}>\n      <input name="title" required \/>\n      <button type="submit">Add<\/button>\n      <ul>\n        {optimisticTodos.map(todo => (\n          <li key={todo.id}>{todo.title}<\/li>\n        ))}\n      <\/ul>\n    <\/form>\n  );\n}\n<\/code><\/pre>\n
5. \u907f\u514d\u5e38\u89c1\u9677\u9631<\/h3>\n