Paparkan mesej selepas pendaftaran dalam NextJS

Question

Saya mempunyai permohonan NextJS 13 dengan borang pendaftaran. API yang saya integrasikan memerlukan pengguna untuk mengesahkan e-mel mereka selepas mendaftar. Apa yang saya mahu lakukan ialah, setelah borang pendaftaran berjaya, alih keluar medan borang dan paparkan mesej yang memberitahu mereka bahawa mereka perlu menyemak e-mel mereka untuk e-mel pengesahan, tetapi sebaliknya ia mengubah hala sepenuhnya ke borang log masuk. Saya sedang belajar NextJS, jadi kod yang saya gunakan diambil dari repositori sampel. Adakah mungkin untuk menukarnya untuk memaparkan mesej dan bukannya mengubah hala ke halaman log masuk?

Halaman pendaftaran saya kelihatan seperti ini:

'gunakan klien'

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

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

eksport lalai Daftar

fungsi Daftar() {
    const userService = useUserService()

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

    fungsi async onSubmit(user) {
        tunggu userService.register(user)
    }

    kembali (
        <>
            <bentuk
                onSubmit={handleSubmit(onSubmit)}
            >
                <div className="col-span-full">
                    <label
                        htmlUntuk="e-mel"
                    >
                        alamat emel
                    </label>
                    <masukan
                        type="e-mel"
                        { ...daftar("e-mel") }
                    />
                </div>
                <div className="col-span-full">
                    <label
                        htmlUntuk="kata laluan"
                    >
                        kata laluan
                    </label>
                    <masukan
                        type="kata laluan"
                        { ...daftar("kata laluan") }
                    />
                </div>
                <div className="col-span-full pt-5">
                    <butang
                        disabled={formState.isSubmitting}
                    >
                        <span>Daftar</span>
                    </butang>
                </div>
            </form>
        </>
    )
}

Fungsi berdaftar sebenar adalah dalam fail useUserService

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

    cuba {
        tunggu fetch.post('/api/authentication/register', pengguna);

        router.push('/log masuk');
    } tangkap (ralat) {
        alertService.error(error);
    }
},

Answer 1

Untuk memaparkan mesej tanpa mengubah hala ke halaman log masuk, anda boleh menggunakan cangkuk useState untuk mengurus UI berdasarkan status kejayaan pendaftaran.

1. Import useState

   import { useState } from 'react';

2. Tambah status pendaftaran yang berjaya

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

3. Tetapkan status kejayaan pendaftaran kepada benar

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

4. Jika pendaftaran berjaya, berikan mesej

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

   );

5. Alih keluar router.push daripada perkhidmatan berdaftar

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