在NextJS中注册后显示一条消息
P粉909476457
2023-08-17 19:22:20
<p>我有一个带有注册表单的NextJS 13应用程序。我正在集成的API要求用户在注册后验证他们的电子邮件。我想要做的是，一旦注册表单成功，删除表单字段并显示一条消息，告诉他们需要检查他们的电子邮件以获取验证电子邮件，但实际上它一直重定向到登录表单。我目前正在学习NextJS，所以我正在使用的代码是从一个示例存储库中获取的。是否可能将其更改为显示消息而不是重定向到登录页？</p>
<p>我的注册页面如下所示：</p>
<pre class="brush:php;toolbar:false;">'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>
</>
)
}</pre>
<p>实际的注册函数位于<code>useUserService</code>文件中，具有以下详细信息：</p>
<pre class="brush:php;toolbar:false;">register: async (user) => {
alertService.clear()
try {
await fetch.post('/api/authentication/register', user);
router.push('/login');
} catch (error) {
alertService.error(error);
}
},</pre>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
为了在不重定向到登录页面的情况下显示消息，您可以使用useState钩子根据注册成功状态来管理UI。
import { useState } from 'react';async function onSubmit(user) { await userService.register(user); setRegistrationSuccess(true); }return ( <> {registrationSuccess ? ( <p>请检查您的电子邮件以获取验证邮件。</p> ) : ( <form onSubmit={handleSubmit(onSubmit)}> </form> )} </>);
register: async (user) => { alertService.clear() try { await fetch.post('/api/authentication/register', user); } catch (error) { alertService.error(error); } },