将函数从服务器传递到客户端组件 Next 13

Question

根据应用程序目录的Next.js文档：

“只要有可能，我们建议在服务器组件内获取数据。服务器组件始终在服务器上获取数据。”

这很棒，因为我正在使用外部 API（我无法更改 CORS 策略 - 允许来源...）。

我有一个带有表单（客户端组件）的页面（服务器组件），我正在尝试使用服务器组件访问 API。

主页

import Form from './Form';

export default function Home() {
   handleSubmit = () => {...submit logic}
   return <Form onSubmit={handleSubmit} />
}

表单组件

'use client'

export default function Form({ onSubmit }) {
 return <form onSubmit={handleSubmit}>...</form>
}

当我尝试将该handleSubmit函数传递给客户端组件时，出现以下错误：

Functions cannot be passed directly to Client Components because they're not serializable.

1. 我不确定这是什么意思。
2. 有没有办法将函数传递给客户端组件？
3. 我需要从服务器组件获取数据，因为 API 有 CORS 策略。是否有可能做我想要完成的事情？

Answer 1

error.js你的目录里有吗？添加use client到文件顶部。

请参阅此处的参考： https: //github.com/vercel/next.js/issues/42408 https://beta.nextjs.org/docs/rendering/server-and-client-components

希望这可以帮助。