NextJS 13.4：如何从服务端组件向客户端组件传递handleSubmit函数

你的核心问题出在Server Action的定义方式和数据传递逻辑上：直接在服务端组件内的函数里写"use server"，加上试图传递浏览器事件对象e，会触发序列化失败。下面是正确的实现方案：

1. 规范定义Server Action #

Server Action必须用"use server"标记，且要放在模块顶部或者函数的直接上方，不能嵌套在组件内部的函数里。另外，浏览器的事件对象e无法被序列化传递到服务端，改用FormData获取表单数据。

修改后的服务端组件（page.js） #

// page.js - 默认服务端组件
import ReusableFormClientComponent from "./ReusableFormClientComponent";

// 单独定义Server Action，"use server"放在函数上方
async function handleSubmit(formData) {
  "use server";

  try {
    // 从FormData中提取表单数据，根据你的实际字段调整
    const datas = {
      name: formData.get("productName"),
      price: formData.get("productPrice"),
      // 其他需要的字段...
    };
    await newProduct(datas);
  } catch (error) {
    console.error("提交失败:", error);
    // 可返回错误状态给客户端展示
    return { error: error.message };
  }
}

export default async function PageServerComponent() {
  return <ReusableFormClientComponent handleSubmit={handleSubmit} />;
}

2. 客户端组件适配 #

客户端组件必须用"use client"标记，接收Server Action后，有两种使用方式：

基础版（无客户端验证） #

直接绑定到表单的action属性，Next.js会自动处理提交流程：

// ReusableFormClientComponent.jsx - 客户端组件
"use client";

export default function ReusableFormClientComponent({ handleSubmit }) {
  return (
    <form action={handleSubmit}>
      {/* 示例表单字段，根据需求调整 */}
      <input type="text" name="productName" placeholder="产品名称" required />
      <input type="number" name="productPrice" placeholder="价格" required />
      <button type="submit">提交产品</button>
    </form>
  );
}

带客户端验证的版本 #

如果需要先在客户端做校验再提交，用useFormState处理服务端返回的状态：

// ReusableFormClientComponent.jsx - 带客户端验证的客户端组件
"use client";

import { useFormState } from "react-dom";

export default function ReusableFormClientComponent({ handleSubmit }) {
  // 初始化状态，接收服务端返回的结果
  const [submitState, formAction] = useFormState(handleSubmit, null);

  const onSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    
    // 客户端验证逻辑示例
    const productName = formData.get("productName");
    if (!productName || productName.length < 2) {
      alert("产品名称至少2个字符");
      return;
    }

    // 调用服务端动作
    await formAction(formData);
  };

  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="productName" placeholder="产品名称" required />
      <input type="number" name="productPrice" placeholder="价格" required />
      <button type="submit">提交产品</button>
      {/* 显示服务端返回的错误 */}
      {submitState?.error && <p style={{ color: "red" }}>{submitState.error}</p>}
    </form>
  );
}

关键注意点 #

• Server Action的"use server"不能放在函数内部，必须是模块级或者直接在函数上方声明。
• 服务端和客户端之间只能传递可序列化的数据，浏览器环境的对象（如事件e、DOM元素）不能直接传递，改用FormData或普通对象。
• 客户端组件必须用"use client"标记，否则无法接收和执行Server Action。

内容的提问来源于stack exchange，提问作者AdrienQua