{"id":193,"date":"2026-07-03T09:57:57","date_gmt":"2026-07-03T01:57:57","guid":{"rendered":"https:\/\/yykcj.com\/?p=193"},"modified":"2026-07-03T09:57:57","modified_gmt":"2026-07-03T01:57:57","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%e6%8f%90%e4%ba%a4%e5%88%b0%e6%95%b0%e6%8d%ae%e7%aa%81%e5%8f%98%e7%9a%84%e6%9c%80%e4%bd%b3","status":"publish","type":"post","link":"https:\/\/yykcj.com\/?p=193","title":{"rendered":"React Server Actions \u5165\u95e8\u4e0e\u8fdb\u9636\uff1a\u4ece\u8868\u5355\u63d0\u4ea4\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\u9879\u9769\u547d\u6027\u7279\u6027\uff0c\u5141\u8bb8\u76f4\u63a5\u5728\u670d\u52a1\u5668\u7aef\u6267\u884c\u51fd\u6570\uff0c\u65e0\u7f1d\u5904\u7406\u6570\u636e\u7a81\u53d8\uff08mutations\uff09\u3002\u5b83\u7b80\u5316\u4e86\u4f20\u7edf\u7684\u524d\u540e\u7aef\u4ea4\u4e92\u6a21\u5f0f\uff0c\u5c24\u5176\u9002\u5408\u8868\u5355\u63d0\u4ea4\u3001\u6570\u636e\u66f4\u65b0\u7b49\u573a\u666f\u3002\u672c\u6587\u5c06\u5e26\u4f60\u4ece\u96f6\u5f00\u59cb\uff0c\u638c\u63e1 Server Actions \u7684\u6838\u5fc3\u7528\u6cd5\u3001\u6700\u4f73\u5b9e\u8df5\u4ee5\u53ca\u5e38\u89c1\u9677\u9631\uff0c\u8ba9\u4f60\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\u6e38\u5203\u6709\u4f59\u3002<\/p>\n

\u73af\u5883\u51c6\u5907<\/h2>\n

\u786e\u4fdd\u4f60\u7684\u9879\u76ee\u4f7f\u7528 React 19 \u53ca\u4ee5\u4e0a\u7248\u672c\uff0c\u5e76\u642d\u914d Next.js 14+\uff08App Router\uff09\u6216\u652f\u6301 Server Actions \u7684\u6846\u67b6\u3002\u672c\u6587\u793a\u4f8b\u57fa\u4e8e Next.js 14\u3002<\/p>\n

\nnpx create-next-app@latest my-app --typescript\ncd my-app\n<\/code><\/pre>\n
\u57fa\u7840\u5165\u95e8\uff1a\u7b2c\u4e00\u4e2a Server Action<\/h2>\n
1. \u5b9a\u4e49 Action<\/h3>\n
\u5728 Next.js \u4e2d\uff0cServer Actions \u53ef\u4ee5\u5b9a\u4e49\u5728\u6587\u4ef6\u9876\u90e8\uff08\u4f7f\u7528 \"use server\"<\/code> \u6307\u4ee4\uff09\u6216\u5355\u72ec\u7684\u6587\u4ef6\u4e2d\u3002\u6700\u7b80\u5355\u7684\u5f62\u5f0f\uff1a<\/p>\n
\n\/\/ app\/actions.ts\n"use server";\n\nexport async function createUser(formData: FormData) {\n  const name = formData.get("name") as string;\n  const email = formData.get("email") as string;\n\n  \/\/ \u6a21\u62df\u6570\u636e\u5e93\u64cd\u4f5c\n  console.log("Creating user:", { name, email });\n  return { success: true };\n}\n<\/code><\/pre>\n
2. \u5728\u5ba2\u6237\u7aef\u7ec4\u4ef6\u4e2d\u4f7f\u7528<\/h3>\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">Submit<\/button>\n    <\/form>\n  );\n}\n<\/code><\/pre>\n
> \ud83d\udca1 \u6ce8\u610f<\/strong>\uff1aaction<\/code> \u5c5e\u6027\u76f4\u63a5\u63a5\u6536 Server Action \u51fd\u6570\uff0c\u65e0\u9700\u624b\u52a8\u8c03\u7528 fetch<\/code> \u6216 axios<\/code>\u3002\u8868\u5355\u63d0\u4ea4\u4f1a\u81ea\u52a8\u53d1\u9001\u8bf7\u6c42\u5e76\u5904\u7406\u54cd\u5e94\u3002<\/p>\n
\u8fdb\u9636\u7528\u6cd5\uff1a\u6570\u636e\u9a8c\u8bc1\u4e0e\u9519\u8bef\u5904\u7406<\/h2>\n
1. \u4f7f\u7528 Zod \u8fdb\u884c\u9a8c\u8bc1<\/h3>\n
\n"use server";\n\nimport { z } from "zod";\n\nconst schema = z.object({\n  name: z.string().min(2, "Name must be at least 2 characters"),\n  email: z.string().email("Invalid email"),\n});\n\nexport async function createUser(formData: FormData) {\n  const validated = schema.safeParse({\n    name: formData.get("name"),\n    email: formData.get("email"),\n  });\n\n  if (!validated.success) {\n    return { errors: validated.error.flatten().fieldErrors };\n  }\n\n  \/\/ \u5904\u7406\u6709\u6548\u6570\u636e\n  console.log("Validated data:", validated.data);\n  return { success: true };\n}\n<\/code><\/pre>\n
2. \u5ba2\u6237\u7aef\u5c55\u793a\u9519\u8bef<\/h3>\n
\n"use client";\n\nimport { createUser } from ".\/actions";\nimport { useActionState } from "react";\n\nexport default function Home() {\n  const [state, formAction] = useActionState(createUser, { errors: {} });\n\n  return (\n    <form action={formAction}>\n      <input name="name" placeholder="Name" \/>\n      {state.errors?.name && <p style={{ color: "red" }}>{state.errors.name}<\/p>}\n      <input name="email" type="email" placeholder="Email" \/>\n      {state.errors?.email && <p style={{ color: "red" }}>{state.errors.email}<\/p>}\n      <button type="submit">Submit<\/button>\n    <\/form>\n  );\n}\n<\/code><\/pre>\n
> \ud83d\udca1 \u63d0\u793a<\/strong>\uff1auseActionState<\/code>\uff08React 19 \u65b0\u589e\uff09\u53ef\u4ee5\u7ba1\u7406 Action \u7684\u72b6\u6001\uff0c\u5305\u62ec\u9519\u8bef\u548c\u52a0\u8f7d\u72b6\u6001\u3002<\/p>\n
\u5ba2\u6237\u7aef\u7ec4\u4ef6\u4e0e Server Actions \u7684\u4ea4\u4e92<\/h2>\n
1. \u8c03\u7528 Server Action \u5e76\u5237\u65b0\u6570\u636e<\/h3>\n
\n"use client";\n\nimport { revalidatePath } from "next\/cache";\nimport { deleteUser } from ".\/actions";\n\nexport function DeleteButton({ userId }: { userId: string }) {\n  const handleDelete = async () => {\n    await deleteUser(userId);\n    \/\/ \u6ce8\u610f\uff1a\u4e0d\u80fd\u76f4\u63a5\u5728\u5ba2\u6237\u7aef\u7ec4\u4ef6\u4e2d\u8c03\u7528 revalidatePath\uff0c\u9700\u8981\u4ece Action \u5185\u90e8\u89e6\u53d1\n  };\n\n  return <button onClick={handleDelete}>Delete<\/button>;\n}\n<\/code><\/pre>\n
\u6b63\u786e\u505a\u6cd5\uff1a\u5728 Server Action \u4e2d\u8c03\u7528 revalidatePath<\/code>\u3002<\/p>\n
\n"use server";\n\nimport { revalidatePath } from "next\/cache";\n\nexport async function deleteUser(userId: string) {\n  \/\/ \u5220\u9664\u7528\u6237\u903b\u8f91\n  revalidatePath("\/users"); \/\/ \u91cd\u65b0\u83b7\u53d6\u7528\u6237\u5217\u8868\n  return { success: true };\n}\n<\/code><\/pre>\n
2. \u4f20\u9012\u975e\u8868\u5355\u6570\u636e<\/h3>\n
\u5982\u679c Action \u9700\u8981\u63a5\u6536\u975e\u8868\u5355\u6570\u636e\uff08\u5982 JSON \u5bf9\u8c61\uff09\uff0c\u53ef\u4ee5\u901a\u8fc7 bind<\/code> \u6216\u76f4\u63a5\u8c03\u7528\uff1a<\/p>\n
\n"use client";\n\nimport { updateUser } from ".\/actions";\n\nexport function UpdateButton({ user }: { user: { id: string; name: string } }) {\n  const handleUpdate = async () => {\n    await updateUser(user);\n  };\n\n  return <button onClick={handleUpdate}>Update<\/button>;\n}\n<\/code><\/pre>\n
\n"use server";\n\nexport async function updateUser(user: { id: string; name: string }) {\n  \/\/ \u66f4\u65b0\u903b\u8f91\n}\n<\/code><\/pre>\n
\u5e38\u89c1\u9677\u9631\u4e0e\u6700\u4f73\u5b9e\u8df5<\/h2>\n
1. \u907f\u514d\u5728\u5ba2\u6237\u7aef\u7ec4\u4ef6\u4e2d\u76f4\u63a5\u4fee\u6539\u72b6\u6001<\/h3>\n
Server Actions \u662f\u5f02\u6b65\u7684\uff0c\u4e0d\u8981\u5728 onClick<\/code> \u4e2d\u76f4\u63a5\u8c03\u7528\u5e76\u671f\u671b\u7acb\u5373\u66f4\u65b0\u72b6\u6001\u3002\u4f7f\u7528 useActionState<\/code> \u6216 startTransition<\/code> \u6765\u7ba1\u7406\u3002<\/p>\n
2. \u5b89\u5168\u6027\uff1a\u6c38\u8fdc\u4e0d\u8981\u4fe1\u4efb\u5ba2\u6237\u7aef\u6570\u636e<\/h3>\n
\u59cb\u7ec8\u5728 Server Action \u4e2d\u8fdb\u884c\u9a8c\u8bc1\u548c\u6388\u6743\u68c0\u67e5\u3002<\/p>\n
\n"use server";\n\nexport async function deleteUser(userId: string) {\n  const session = await getSession();\n  if (!session || session.user.id !== userId) {\n    throw new Error("Unauthorized");\n  }\n  \/\/ \u5220\u9664\u903b\u8f91\n}\n<\/code><\/pre>\n
3. \u4f7f\u7528 useActionState<\/code> \u5904\u7406\u52a0\u8f7d\u72b6\u6001<\/h3>\n
\nconst [state, formAction, isPending] = useActionState(createUser, { errors: {} });\n\nreturn (\n  <form action={formAction}>\n    <button disabled={isPending}>{isPending ? "Submitting..." : "Submit"}<\/button>\n  <\/form>\n);\n<\/code><\/pre>\n
4. \u9519\u8bef\u8fb9\u754c<\/h3>\n
\u5bf9\u4e8e\u672a\u6355\u83b7\u7684\u9519\u8bef\uff0c\u53ef\u4ee5\u4f7f\u7528 React \u9519\u8bef\u8fb9\u754c\u6216 Next.js \u7684 error.js<\/code> \u6587\u4ef6\u3002<\/p>\n
\u603b\u7ed3<\/h2>\n
React Server Actions \u6781\u5927\u7b80\u5316\u4e86\u6570\u636e\u7a81\u53d8\u6d41\u7a0b\uff0c\u8ba9\u524d\u7aef\u5f00\u53d1\u8005\u65e0\u9700\u624b\u52a8\u7ba1\u7406 API \u8def\u7531\u3002\u901a\u8fc7\u672c\u6587\u7684\u5b66\u4e60\uff0c\u4f60\u5e94\u8be5\u638c\u63e1\u4e86\uff1a<\/p>\n