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

Question

我刚刚熟悉 Next.js 14 应用程序路由器中的服务器操作，服务器操作通常用于向服务器发出发布请求...有没有一种方法服务器操作可以触发客户端上的功能，想法是为了拥有类似于 React 查询

onSucess

和

onError

的功能，可以根据对 API 的响应状态触发这些函数，让我们假设用户使用服务器操作与现有电子邮件发出注册请求，并且在我的应用程序功能我需要触发一个 toast 通知，让用户知道电子邮件已在使用中，知道如何实现这个...

这是 Next.js 文档中的一个片段，我们如何使用

useFormState

从服务器操作获取返回值，这可以使用

useEffect

进行修改以触发客户端上的函数，但我真的不想要

useEffect

解决方案。

export function AddForm() {
const [state, formAction] = useFormState(createTodo, initialState)
    return (
        <form action={formAction}>
            <label htmlFor="todo">Enter Task</label>
            <input type="text" id="todo" name="todo" required />
            <SubmitButton />
            <p aria-live="polite" className="sr-only">
              {state?.message}
            </p>
        </form>
    )
}

我可以确认

useFormStatus

和

useEffect

有效，但我希望有一个更优化的解决方案。

Answer 1

我不确定这是否是一个更优化的解决方案，但它是不同的。您可以使用 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}>
...