错误：函数无法直接传递给客户端组件

Question

我正在使用 nextjs 14 应用程序路由器。但我收到错误：“错误：函数无法直接传递给客户端组件，除非您通过用“使用服务器”标记来显式公开它。或者您可能想调用此函数而不是返回它。”

我的问题是，当我的代码中没有客户端组件时，为什么会出现提及客户端组件的错误消息。

//index.js
export const handleSubmit = async(formData) => {
    console.log(formData.get("name"));
}

//AddTaskForm.jsx
import {handleSubmit} from "@/app/action/index"
const AddTaskForm = () => {
    return (
        <form action={handleSubmit} className="mt-10 flex flex-col gap-4 w-[300px] mx-auto">
            <div className="flex flex-col gap-2">
                <label htmlFor="name">Name</label>
                <input className="border border-black" type="text" id="name" name="name" />
            </div>
            <button type="submit" className="bg-purple-500 py-2">Submit</button>
        </form>
    );
};
export default AddTaskForm;

//page.js
import AddTaskForm from '@/app/ui/AddTaskForm';
export default function Home() {
  return (
    <AddTaskForm/>
  );
}

错误消息是否具有误导性？

Answer 1

看起来每个人都觉得错误报告非常具有误导性。看看这个：

错误：函数无法直接传递给客户端组件，除非您通过使用“使用服务器”标记来显式公开它

由于某种原因，我们无法将

handleSubmit

函数直接分配给

action

属性，这是 Next.js 不允许的，除非我们使用

handleSubmit

指令声明

useServer

函数以使其在表单操作中可用，尽管您没有使用任何客户端组件

'use server'

export const handleSubmit = async (formData) => {
  console.log(formData.get('name'))
}