next.js 带有服务器操作的回调函数

6mzjoqzu  于 2023-11-18  发布在  其他
关注(0)|答案(1)|浏览(130)

我只是让自己熟悉next 14应用路由器中的服务器动作,服务器动作一般用于向服务器发出post请求.有没有一种方法可以让服务器动作触发客户端上的函数,这个想法是有一些类似于react query onSucess和onError的东西,这些函数可以根据状态触发对API的响应,让我们假设一个用户使用一个已经存在的电子邮件的服务器操作发出注册请求,在我的应用程序功能中,我需要触发一个吐司通知,让用户知道电子邮件已经在使用中,如何实现这一点。
这是nextjs文档中的一个片段,我们如何使用useFormState从服务器操作中获取返回值,这可以用useEffect来重新处理以触发客户端上的函数,但我真的不想要useEffect解决方案。
导出函数AddForm(){*const [state,formAction] = useFormState(NoteTodo,initialState)return(输入任务{state?.message}
)}
我可以确认useFormstatus与useEffect的作品,但我希望有一个更好的优化解决方案

wbgh16ku

wbgh16ku1#

我不确定这是否是一个更优化的解决方案,但它是不同的。你可以使用useTransition。在这个例子中,signUp是一个服务器动作。在handleSignup函数中,你可以设置状态或解析result来触发toast等等。

import { useTransition } from "react";

const [isPending, startTransition] = useTransition();

const handleSignup = form.handleSubmit(async (data) => {
    startTransition(async () => {
        const result = await signUp(data);
    });
});

return (
    <Form {...form}>
        <form onSubmit={handleCreateProspect}>
...

字符串

相关问题