Nach der Registrierung in NextJS eine Nachricht anzeigen

Question

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?

Meine Registrierungsseite sieht so aus:

'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>
        </>
    )
}

Die tatsächlich registrierte Funktion befindet sich in der Datei useUserService mit den folgenden Details:

register: async (user) =>
    alarmService.clear()

    versuchen {
        wait fetch.post('/api/authentication/register', user);

        router.push('/login');
    } Catch (Fehler) {
        alarmService.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);
       }
   },