{"id":195,"date":"2026-07-05T10:04:05","date_gmt":"2026-07-05T02:04:05","guid":{"rendered":"https:\/\/yykcj.com\/?p=195"},"modified":"2026-07-05T10:04:05","modified_gmt":"2026-07-05T02:04:05","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","status":"publish","type":"post","link":"https:\/\/yykcj.com\/?p=195","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":"

\u4e3a\u4ec0\u4e48\u9700\u8981 Server Actions\uff1f<\/h2>\n

\u5728\u4f20\u7edf\u7684 React \u5e94\u7528\u4e2d\uff0c\u5904\u7406\u8868\u5355\u63d0\u4ea4\u901a\u5e38\u9700\u8981\u4ee5\u4e0b\u6b65\u9aa4\uff1a<\/p>\n

    \n
  1. \u5728\u524d\u7aef\u5b9a\u4e49\u8868\u5355\u7ec4\u4ef6\uff0c\u7ba1\u7406\u8868\u5355\u72b6\u6001\u3002<\/li>\n
  2. \u7f16\u5199 API \u8def\u7531\uff08\u5982 Next.js \u7684 Route Handlers \u6216 Express \u7aef\u70b9\uff09\u3002<\/li>\n
  3. \u5728\u8868\u5355\u63d0\u4ea4\u65f6\uff0c\u901a\u8fc7 fetch \u6216 axios \u53d1\u9001\u8bf7\u6c42\u3002<\/li>\n
  4. \u5728\u670d\u52a1\u7aef\u5904\u7406\u6570\u636e\uff0c\u5e76\u8fd4\u56de\u54cd\u5e94\u3002<\/li>\n
  5. \u5728\u524d\u7aef\u5904\u7406\u54cd\u5e94\uff0c\u66f4\u65b0 UI \u6216\u663e\u793a\u9519\u8bef\u3002<\/li>\n<\/ol>\n

    \u8fd9\u4e2a\u8fc7\u7a0b\u6d89\u53ca\u5927\u91cf\u6837\u677f\u4ee3\u7801\uff0c\u800c\u4e14\u524d\u540e\u7aef\u903b\u8f91\u5206\u79bb\u4f7f\u5f97\u7ef4\u62a4\u53d8\u5f97\u56f0\u96be\u3002React Server Actions \u5f7b\u5e95\u6539\u53d8\u4e86\u8fd9\u4e00\u73b0\u72b6\uff1a\u5b83\u5141\u8bb8\u4f60\u76f4\u63a5\u5728\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e2d\u5b9a\u4e49\u5f02\u6b65\u51fd\u6570\uff0c\u7136\u540e\u5728\u5ba2\u6237\u7aef\u7ec4\u4ef6\u4e2d\u50cf\u8c03\u7528\u666e\u901a\u51fd\u6570\u4e00\u6837\u8c03\u7528\u5b83\u4eec\u3002\u6570\u636e\u7a81\u53d8\u53d8\u5f97\u50cf\u8c03\u7528\u4e00\u4e2a\u672c\u5730\u51fd\u6570\u4e00\u6837\u7b80\u5355\uff0c\u540c\u65f6\u4fdd\u6301\u4e86\u670d\u52a1\u7aef\u7684\u5b89\u5168\u6027\u548c\u6027\u80fd\u4f18\u52bf\u3002<\/p>\n

    \u57fa\u7840\u7528\u6cd5\uff1a\u7b2c\u4e00\u4e2a Server Action<\/h2>\n

    \u9996\u5148\uff0c\u786e\u4fdd\u4f60\u7684\u9879\u76ee\u4f7f\u7528 React 19 \u6216 Next.js 14+\uff08App Router\uff09\u3002Server Actions \u53ef\u4ee5\u7528\u5728\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e2d\uff0c\u4e5f\u53ef\u4ee5\u7528\u5728\u5ba2\u6237\u7aef\u7ec4\u4ef6\u4e2d\uff08\u901a\u8fc7 \"use server\"<\/code> \u6307\u4ee4\uff09\u3002<\/p>\n

    1. \u5728\u670d\u52a1\u7aef\u7ec4\u4ef6\u4e2d\u5b9a\u4e49 Action<\/h3>\n
    \n\/\/ app\/actions.ts (Server Component)\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  await new Promise((resolve) => setTimeout(resolve, 1000));\n  console.log(`User created: ${name} (${email})`);\n  return { success: true, message: "User created!" };\n}\n<\/code><\/pre>\n
    > \ud83d\udca1 \u6ce8\u610f\uff1a\"use server\"<\/code> \u6307\u4ee4\u5fc5\u987b\u4f4d\u4e8e\u6587\u4ef6\u7684\u9876\u90e8\uff0c\u5e76\u4e14\u53ea\u80fd\u5bfc\u51fa\u5f02\u6b65\u51fd\u6570\u3002<\/p>\n
    2. \u5728\u5ba2\u6237\u7aef\u7ec4\u4ef6\u4e2d\u4f7f\u7528 Action<\/h3>\n
    \n\/\/ app\/page.tsx (Client Component)\n"use client";\n\nimport { createUser } from ".\/actions";\n\nexport default function Home() {\n  return (\n    <form action={createUser}>\n      <input type="text" name="name" placeholder="Name" required \/>\n      <input type="email" name="email" placeholder="Email" required \/>\n      <button type="submit">Create User<\/button>\n    <\/form>\n  );\n}\n<\/code><\/pre>\n
    \u5f53\u8868\u5355\u63d0\u4ea4\u65f6\uff0cReact \u4f1a\u81ea\u52a8\u5c06 FormData<\/code> \u4f20\u9012\u7ed9 createUser<\/code> \u51fd\u6570\uff0c\u5e76\u5728\u670d\u52a1\u7aef\u6267\u884c\u3002\u6574\u4e2a\u8fc7\u7a0b\u65e0\u9700\u624b\u52a8\u53d1\u9001 HTTP \u8bf7\u6c42\uff0c\u4e5f\u65e0\u9700\u7ba1\u7406\u52a0\u8f7d\u72b6\u6001\u3002<\/p>\n
    3. \u5904\u7406\u52a0\u8f7d\u72b6\u6001\u4e0e\u8868\u5355\u91cd\u7f6e<\/h3>\n
    \u867d\u7136 action<\/code> \u5c5e\u6027\u4f1a\u81ea\u52a8\u5904\u7406\u63d0\u4ea4\uff0c\u4f46\u6709\u65f6\u6211\u4eec\u9700\u8981\u5728\u5ba2\u6237\u7aef\u663e\u793a\u52a0\u8f7d\u72b6\u6001\u3002\u53ef\u4ee5\u4f7f\u7528 useFormStatus<\/code> \u94a9\u5b50\uff1a<\/p>\n
    \n\/\/ app\/SubmitButton.tsx\n"use client";\n\nimport { useFormStatus } from "react-dom";\n\nexport function SubmitButton() {\n  const { pending } = useFormStatus();\n  return (\n    <button type="submit" disabled={pending}>\n      {pending ? "Submitting..." : "Create User"}\n    <\/button>\n  );\n}\n<\/code><\/pre>\n
    \u7136\u540e\u5728\u8868\u5355\u4e2d\u4f7f\u7528\uff1a<\/p>\n
    \n<form action={createUser}>\n  <input type="text" name="name" required \/>\n  <input type="email" name="email" required \/>\n  <SubmitButton \/>\n<\/form>\n<\/code><\/pre>\n
    useFormStatus<\/code> \u5fc5\u987b\u5728\u8868\u5355\u7684\u5b50\u7ec4\u4ef6\u4e2d\u4f7f\u7528\uff0c\u5b83\u4f1a\u81ea\u52a8\u8bfb\u53d6\u6700\u8fd1\u7684 <\/p>\n
    <\/code> \u7684\u63d0\u4ea4\u72b6\u6001\u3002<\/p>\n
    \u8fdb\u9636\u7528\u6cd5\uff1a\u8868\u5355\u9a8c\u8bc1\u4e0e\u9519\u8bef\u5904\u7406<\/h2>\n
    1. \u4f7f\u7528 Zod \u8fdb\u884c\u670d\u52a1\u7aef\u9a8c\u8bc1<\/h3>\n
    \n\/\/ app\/actions.ts\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 address"),\n});\n\nexport async function createUser(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      message: "Validation failed",\n    };\n  }\n\n  const { name, email } = validatedFields.data;\n  \/\/ \u6570\u636e\u5e93\u64cd\u4f5c...\n  return { success: true, message: "User created!" };\n}\n<\/code><\/pre>\n
    2. \u5728\u5ba2\u6237\u7aef\u663e\u793a\u9519\u8bef<\/h3>\n
    \u4f7f\u7528 useActionState<\/code> \u94a9\u5b50\uff08React 19 \u4e2d\u66ff\u4ee3 useFormState<\/code>\uff09\uff1a<\/p>\n
    \n\/\/ app\/UserForm.tsx\n"use client";\n\nimport { useActionState } from "react";\nimport { createUser } from ".\/actions";\n\nexport function UserForm() {\n  const [state, formAction] = useActionState(createUser, {\n    message: "",\n    errors: {},\n  });\n\n  return (\n    <form action={formAction}>\n      <div>\n        <input type="text" name="name" placeholder="Name" \/>\n        {state.errors?.name && <p style={{ color: "red" }}>{state.errors.name[0]}<\/p>}\n      <\/div>\n      <div>\n        <input type="email" name="email" placeholder="Email" \/>\n        {state.errors?.email && <p style={{ color: "red" }}>{state.errors.email[0]}<\/p>}\n      <\/div>\n      <button type="submit">Create User<\/button>\n      {state.message && <p>{state.message}<\/p>}\n    <\/form>\n  );\n}\n<\/code><\/pre>\n
    useActionState<\/code> \u63a5\u6536 action \u51fd\u6570\u548c\u521d\u59cb\u72b6\u6001\uff0c\u8fd4\u56de\u5f53\u524d\u72b6\u6001\u548c\u65b0\u7684 formAction\u3002\u5f53 action \u6267\u884c\u540e\uff0c\u8fd4\u56de\u7684\u72b6\u6001\u4f1a\u81ea\u52a8\u66f4\u65b0\u3002<\/p>\n
    \u8fdb\u9636\u7528\u6cd5\uff1a\u4e50\u89c2\u66f4\u65b0\uff08Optimistic Updates\uff09<\/h2>\n
    \u4e50\u89c2\u66f4\u65b0\u662f\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u7684\u91cd\u8981\u6a21\u5f0f\uff1a\u5728\u8bf7\u6c42\u5b8c\u6210\u524d\u5c31\u66f4\u65b0 UI\uff0c\u5982\u679c\u5931\u8d25\u5219\u56de\u6eda\u3002<\/p>\n
    \n\/\/ app\/TodoList.tsx\n"use client";\n\nimport { useOptimistic, useRef } from "react";\nimport { addTodo } from ".\/actions";\n\nexport function TodoList({ todos }: { todos: string[] }) {\n  const [optimisticTodos, addOptimisticTodo] = useOptimistic(\n    todos,\n    (state, newTodo: string) => [...state, newTodo]\n  );\n  const formRef = useRef<HTMLFormElement>(null);\n\n  async function formAction(formData: FormData) {\n    const todo = formData.get("todo") as string;\n    addOptimisticTodo(todo);\n    formRef.current?.reset();\n    await addTodo(formData);\n  }\n\n  return (\n    <>\n      <form action={formAction} ref={formRef}>\n        <input type="text" name="todo" required \/>\n        <button type="submit">Add<\/button>\n      <\/form>\n      <ul>\n        {optimisticTodos.map((todo, i) => (\n          <li key={i}>{todo}<\/li>\n        ))}\n      <\/ul>\n    <\/>\n  );\n}\n<\/code><\/pre>\n
    useOptimistic<\/code> \u63a5\u53d7\u5f53\u524d\u72b6\u6001\u548c\u4e00\u4e2a\u66f4\u65b0\u51fd\u6570\uff0c\u8fd4\u56de\u4e00\u4e2a\u4e50\u89c2\u72b6\u6001\u548c\u4e00\u4e2a\u7528\u4e8e\u89e6\u53d1\u4e50\u89c2\u66f4\u65b0\u7684\u51fd\u6570\u3002\u5728 formAction<\/code> \u4e2d\uff0c\u5148\u8c03\u7528 addOptimisticTodo<\/code> \u7acb\u5373\u6dfb\u52a0\u5f85\u529e\u4e8b\u9879\uff0c\u7136\u540e\u6267\u884c\u5b9e\u9645\u7684 action\u3002\u5982\u679c action \u5931\u8d25\uff0cReact \u4f1a\u81ea\u52a8\u56de\u6eda\u72b6\u6001\u3002<\/p>\n
    \u6700\u4f73\u5b9e\u8df5\u4e0e\u5e38\u89c1\u9677\u9631<\/h2>\n
    1. \u59cb\u7ec8\u5728\u670d\u52a1\u7aef\u8fdb\u884c\u9a8c\u8bc1<\/h3>\n
    \u4e0d\u8981\u4f9d\u8d56\u5ba2\u6237\u7aef\u9a8c\u8bc1\uff0c\u56e0\u4e3a\u6076\u610f\u7528\u6237\u53ef\u4ee5\u7ed5\u8fc7\u3002\u59cb\u7ec8\u5728 Server Action \u4e2d\u4f7f\u7528 Zod \u6216\u7c7b\u4f3c\u5e93\u8fdb\u884c\u9a8c\u8bc1\u3002<\/p>\n
    2. \u4f7f\u7528\u4e8b\u52a1\u548c\u9519\u8bef\u8fb9\u754c<\/h3>\n
    \u5bf9\u4e8e\u6d89\u53ca\u591a\u4e2a\u6570\u636e\u5e93\u64cd\u4f5c\u7684 action\uff0c\u4f7f\u7528\u4e8b\u52a1\u786e\u4fdd\u6570\u636e\u4e00\u81f4\u6027\u3002\u540c\u65f6\uff0c\u5728\u5ba2\u6237\u7aef\u4f7f\u7528\u9519\u8bef\u8fb9\u754c\u6355\u83b7\u672a\u9884\u671f\u7684\u9519\u8bef\u3002<\/p>\n
    3. \u907f\u514d\u5728 Action \u4e2d\u76f4\u63a5\u8fd4\u56de\u654f\u611f\u6570\u636e<\/h3>\n
    Server Actions \u7684\u8fd4\u56de\u503c\u4f1a\u5e8f\u5217\u5316\u5e76\u53d1\u9001\u7ed9\u5ba2\u6237\u7aef\uff0c\u56e0\u6b64\u4e0d\u8981\u8fd4\u56de\u5bc6\u7801\u3001\u4ee4\u724c\u7b49\u654f\u611f\u4fe1\u606f\u3002<\/p>\n
    4. \u6ce8\u610f Action \u7684\u91cd\u65b0\u6267\u884c<\/h3>\n
    \u5728 React \u4e25\u683c\u6a21\u5f0f\u4e0b\uff0caction \u53ef\u80fd\u4f1a\u88ab\u8c03\u7528\u4e24\u6b21\uff08\u5f00\u53d1\u73af\u5883\uff09\u3002\u786e\u4fdd\u4f60\u7684 action \u662f\u5e42\u7b49\u7684\uff0c\u6216\u8005\u4f7f\u7528\u552f\u4e00\u6807\u8bc6\u7b26\u9632\u6b62\u91cd\u590d\u63d0\u4ea4\u3002<\/p>\n
    5. \u7ec4\u5408\u591a\u4e2a Action<\/h3>\n
    \u5982\u679c\u4e00\u4e2a\u9875\u9762\u9700\u8981\u591a\u4e2a\u4e0d\u540c\u7684 action\uff0c\u53ef\u4ee5\u5c06\u5b83\u4eec\u653e\u5728\u5355\u72ec\u7684\u6587\u4ef6\u4e2d\uff0c\u6216\u8005\u4f7f\u7528\u5bf9\u8c61\u5bfc\u51fa\uff1a<\/p>\n
    \n\/\/ app\/actions.ts\nexport const userActions = {\n  create: async (formData: FormData) => { ... },\n  update: async (formData: FormData) => { ... },\n};\n<\/code><\/pre>\n
    6. \u4e0e\u5916\u90e8 API \u4ea4\u4e92<\/h3>\n
    Server Actions \u53ef\u4ee5\u8c03\u7528\u5916\u90e8 API\uff0c\u4f46\u6ce8\u610f\u4e0d\u8981\u66b4\u9732 API \u5bc6\u94a5\u3002\u5c06\u5bc6\u94a5\u653e\u5728\u73af\u5883\u53d8\u91cf\u4e2d\uff0c\u5e76\u5728\u670d\u52a1\u7aef\u4f7f\u7528\u3002<\/p>\n
    \u603b\u7ed3<\/h2>\n
    React Server Actions \u7b80\u5316\u4e86\u6570\u636e\u7a81\u53d8\u7684\u6d41\u7a0b\uff0c\u51cf\u5c11\u4e86\u6837\u677f\u4ee3\u7801\uff0c\u5e76\u63d0\u5347\u4e86\u5b89\u5168\u6027\u3002\u901a\u8fc7\u672c\u6587\u7684\u5b66\u4e60\uff0c\u4f60\u5e94\u8be5\u80fd\u591f\uff1a<\/p>\n