在NextJS中注册后显示一条消息
P粉909476457
P粉909476457 2023-08-17 19:22:20
[React讨论组]

我有一个带有注册表单的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);
    }
},
P粉909476457
P粉909476457

全部回复(1)
P粉204079743

为了在不重定向到登录页面的情况下显示消息,您可以使用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);
        }
    },
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号