Bagaimana untuk log pengesahan borang menggunakan zod dan react-hook-form seperti dalam tutorial langsing ini?

Question

Saya cuba mengikuti tutorial pengesahan zod secara ringkas. Saya tidak mempunyai pengalaman dengan ini (svelte) jadi saya tertanya-tanya bagaimana saya boleh meniru fungsi kod ini dalam aplikasi React/next yang mudah? Saya terperangkap pada apa ({permintaan}) akan/akan dihantar ke fungsi async.

Selain itu, adakah ini perlu dilakukan di dalam useEffect atau hanya dipanggil semasa penyerahan borang?

export const actions = {
default: async ({ request }) => {
    const formData = Object.fromEntries(await request.formData());
    console.log('Form Data:', formData);

    try {
        const result = registerSchema.parse(formData);
        console.log('SUCCESS');
        console.log(result);
    } catch (err) {
        const { fieldErrors: errors } = err.flatten();
        const { password, passwordConfirm, ...rest } = formData;
        return {
            data: rest,
            errors
        };
    }
};

Berikut ialah repositori untuk tutorial ini: https://github.com/huntabyte/sveltekit-form-validation/blob/main/src/routes/%2Bpage.server.js

Answer 1

Ini yang saya lakukan:

1. Mula-mula, saya mentakrifkan skema pengesahan menggunakan zod.
2. Saya kemudian mencipta cangkuk tersuai untuk mengendalikan penyerahan dan pengesahan borang. Dalam cangkuk ini, saya menggunakan cangkuk useForm daripada react-hook-form untuk menguruskan keadaan borang.
3. Untuk mengendalikan penyerahan borang, saya lulus fungsi handleSubmit daripada useForm ke cangkuk tersuai saya.
4. Dalam fungsi handleSubmit, saya menggunakan kaedah parse dalam seni bina pengesahan zod untuk mengesahkan data borang.
5. Jika pengesahan berjaya, saya akan log data borang ke konsol. Jika tidak, saya mengembalikan objek yang mengandungi data borang dan sebarang ralat pengesahan.

Secara keseluruhan, saya dapati pendekatan ini berfungsi dengan baik dan mudah difahami serta dilaksanakan. Bagi soalan anda tentang tempat untuk meletakkan kod pengesahan, saya cadangkan memanggilnya pada penyerahan borang daripada memanggilnya dalam useEffect.