在NextJS中注册后显示一条消息

Question

我有一个带有注册表单的NextJS 13应用程序。我正在集成的API要求用户在注册后验证他们的电子邮件。我想要做的是，一旦注册表单成功，删除表单字段并显示一条消息，告诉他们需要检查他们的电子邮件以获取验证电子邮件，但实际上它一直重定向到登录表单。我目前正在学习NextJS，所以我正在使用的代码是从一个示例存储库中获取的。是否可能将其更改为显示消息而不是重定向到登录页？

我的注册页面如下所示：

'use client'

import { useForm } from 'react-hook-form'

import { useUserService } from '@/app/_services'

export default Register

function Register() {
    const userService = useUserService()

    const { register, handleSubmit, formState } = useForm()

    async function onSubmit(user) {
        await userService.register(user)
    }

    return (
        <>
            <form
                onSubmit={handleSubmit(onSubmit)}
            >
                <div className="col-span-full">
                    <label
                        htmlFor="email"
                    >
                        电子邮件地址
                    </label>
                    <input
                        type="email"
                        { ...register("email") }
                    />
                </div>
                <div className="col-span-full">
                    <label
                        htmlFor="password"
                    >
                        密码
                    </label>
                    <input
                        type="password"
                        { ...register("password") }
                    />
                </div>
                <div className="col-span-full pt-5">
                    <button
                        disabled={formState.isSubmitting}
                    >
                        <span>注册</span>
                    </button>
                </div>
            </form>
        </>
    )
}

实际的注册函数位于useUserService文件中，具有以下详细信息：

register: async (user) => {
    alertService.clear()

    try {
        await fetch.post('/api/authentication/register', user);

        router.push('/login');
    } catch (error) {
        alertService.error(error);
    }
},

Answer 1

为了在不重定向到登录页面的情况下显示消息，您可以使用useState钩子根据注册成功状态来管理UI。

1. 导入useState

   import { useState } from 'react';

2. 添加一个注册成功的状态

   const [registrationSuccess, setRegistrationSuccess] = useState(false);

3. 将注册成功状态设置为true

   async function onSubmit(user) {
       await userService.register(user);
       setRegistrationSuccess(true);
   }

4. 如果注册成功，则渲染消息

   return (
    <>
        {registrationSuccess ? (
            <p>请检查您的电子邮件以获取验证邮件。</p>
        ) : (
            <form onSubmit={handleSubmit(onSubmit)}>
   
            </form>
        )}
    </>

   );

5. 从注册服务中删除router.push

   register: async (user) => {
       alertService.clear()
       try {
           await fetch.post('/api/authentication/register', user);
       } catch (error) {
           alertService.error(error);
       }
   },