在 Next.js 中收到此错误消息,但不知道该如何处理。 Next.js 版本 13.0.5。
我将一个 prop 传递给 Next.js 中的客户端组件。 Prop 是对象列表,其中一个值是一个函数。但问题是,这个错误信息意味着什么?
错误:函数无法直接传递给客户端组件,除非您通过使用“使用服务器”标记来显式公开它
如何通过用“使用服务器”标记来公开函数?
matchesColumns.push({ field: 'pk', headerName: "", flex: 0.3, renderCell: (params, event) => (<Link href={`/matches/${encodeURIComponent(params.row.pk)}`}>Details</Link>) });
(...)
{<Tabela2 rows={matchesRows} columns={matchesColumns}/>}
这是 Next.js 即将推出的一项新功能,称为服务器操作。
您可以使用服务器操作来传递异步函数server to client组件,同时仍然可以从客户端调用它们。
这是一个例子:
// page.tsx
"use server";
import { ClientComponent } from './ClientComponent.tsx';
async function deleteItem(itemId: string) {
"use server"; // mark function as a server action (fixes the error)
// TODO add item deletion logic
return null;
}
export function Page() {
return <ClientComponent deleteItem={deleteItem} />
}
// ClientComponent.tsx
export function ClientComponent({ deleteItem }) {
return (
<button onClick={async () => {
await deleteItem("foobar");
alert("item has been deleted");
}}>
delete item
</button>
);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)