Nach der Registrierung in NextJS eine Nachricht anzeigen
P粉909476457
2023-08-17 19:22:20
<p>Ich habe eine NextJS 13-Anwendung mit einem Registrierungsformular. Die API, die ich integriere, erfordert, dass Benutzer ihre E-Mail-Adresse nach der Anmeldung bestätigen. Was ich tun möchte, ist, sobald das Registrierungsformular erfolgreich ist, die Formularfelder zu entfernen und eine Meldung anzuzeigen, dass sie ihre E-Mails auf eine Bestätigungs-E-Mail überprüfen müssen, aber stattdessen wird direkt zum Anmeldeformular weitergeleitet. Ich lerne gerade NextJS, daher stammt der Code, den ich verwende, aus einem Beispiel-Repository. Ist es möglich, es so zu ändern, dass eine Nachricht angezeigt wird, anstatt zur Anmeldeseite umzuleiten? </p>
<p>Meine Registrierungsseite sieht so aus:</p>
<pre class="brush:php;toolbar:false;">'Client verwenden'
importiere { useForm } aus 'react-hook-form'
importiere { useUserService } aus '@/app/_services'
Export-Standardregister
Funktion Register() {
const userService = useUserService()
const { register, handleSubmit, formState } = useForm()
asynchrone Funktion onSubmit(user) {
Warten Sie auf userService.register(Benutzer)
}
zurückkehren (
<>
<form
onSubmit={handleSubmit(onSubmit)}
>
<div className="col-span-full">
<Label
htmlFor="email"
>
E-Mail-Adresse
</label>
<Eingabe
type="E-Mail"
{ ...Registrierungs-E-mail") }
/>
</div>
<div className="col-span-full">
<Label
htmlFor="passwort"
>
Passwort
</label>
<Eingabe
type="Passwort"
{ ...register("password") }
/>
</div>
<div className="col-span-full pt-5">
<-Taste
deaktiviert={formState.isSubmitting}
>
<span>Registrieren</span>
</button>
</div>
</form>
</>
)
}</pre>
<p>Die tatsächlich registrierte Funktion befindet sich in der Datei <code>useUserService</code> mit den folgenden Details: </p>
<pre class="brush:php;toolbar:false;">register: async (user) =>
alarmService.clear()
versuchen {
wait fetch.post('/api/authentication/register', user);
router.push('/login');
} Catch (Fehler) {
alarmService.error(error);
}
},</pre>
![[Web-Frontend] Node.js-Schnellstart](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); } },