Penyelesaian kepada masalah yang memerlukan dua klik untuk mengesahkan dalam borang Log Masuk React

Dalam perkembangan React, kadang -kadang anda akan menghadapi masalah bahawa borang log masuk perlu diklik dua kali sebelum ia dapat disahkan. Keadaan ini sering disebabkan oleh pemahaman yang tidak mencukupi tentang mekanisme kemas kini yang tidak segerak untuk digunakan dan kekeliruan konsep penutupan.

Dalam coretan kod masalah, fungsi handlesubmit mengakses objek ralat dengan segera selepas memanggil setErrors, yang akan menyebabkan kesilapan lama menyatakan diakses, jadi ia mengambil dua klik untuk mencetuskan pengesahan dan logik penyerahan yang betul.

 const handlesubmit = (e) => {
    E.PreventDefault ()
    setErrors (pengesahan (nilai))
    jika (errors.password === "" && errors.email === "") {
        axios.post ('http: // localhost: 8081/login', nilai)
        .THEN (res => {
            jika (res.data.errormessage === 'kejayaan') {
                navigasi ('/papan pemuka');
            }
            lain {
                console.log (res.data.errormessage);
            }
        })
        .catch (err => console.log (err));
    }
};

Menyebabkan analisis

SetErrors adalah operasi tak segerak yang tidak segera mengemas kini nilai kesilapan. Ini bermakna bahawa selepas setErrors (pengesahan (nilai)) dilaksanakan, kesilapan masih mengekalkan nilai sebelumnya (biasanya nilai awal {}). Oleh itu, jika (errors.password === "" && errors.email === "") Penghakiman keadaan akan gagal pada klik pertama kerana ralat belum dikemas kini.

Fenomena ini berkaitan dengan "penutupan basi" React. Fungsi handlesubmit membentuk penutupan yang menangkap nilai awal kesilapan. Walaupun SetErrors mengemas kini kesilapan, pemboleh ubah kesilapan di dalam fungsi Handlesubmit masih menunjuk kepada nilai lama.

Penyelesaian

Untuk menyelesaikan masalah ini, kita perlu memastikan bahawa setErrors telah menyelesaikan kemas kini sebelum mengakses kesilapan. Penyelesaian mudah adalah untuk menyimpan hasil pengesahan (nilai) dalam pembolehubah tempatan dan kemudian menggunakan pembolehubah tempatan ini untuk penghakiman bersyarat.

Kod yang diubahsuai adalah seperti berikut:

 const handlesubmit = (e) => {
    E.PreventDefault ()
    const NewErrors = pengesahan (nilai);
    SetErrors (NewErrors)
    jika (newerrors.password === "" && NewErrors.email === "") {
        axios.post ('http: // localhost: 8081/login', nilai)
        .THEN (res => {
            jika (res.data.errormessage === 'kejayaan') {
                navigasi ('/papan pemuka');
            }
            lain {
                console.log (res.data.errormessage);
            }
        })
        .catch (err => console.log (err));
    }
};

Dalam kod yang diubah suai ini, pembolehubah NewErrors menyimpan nilai pulangan pengesahan (nilai), yang mengandungi maklumat ralat terkini. Kami menggunakan NewErrors untuk penghakiman bersyarat, dan bukannya menggunakan kesilapan secara langsung. Ini memastikan bahawa maklumat ralat terkini digunakan apabila menentukan keadaan, dengan itu mengelakkan masalah memerlukan dua klik untuk mengesahkan.

Ringkasan dan langkah berjaga -jaga

• Kaedah set UseState tidak segerak dan tidak mengemas kini status dengan segera.
• Memahami fenomena "penutupan basi" React dan elakkan mengakses negeri sebaik sahaja kaedah yang ditetapkan.
• Gunakan pembolehubah tempatan untuk menyimpan hasil kaedah yang ditetapkan supaya nilai keadaan terkini digunakan dalam kod berikutnya.

Dengan memahami mekanisme kemas kini asynchronous dan konsep penutupan penggunaan, masalah seperti yang biasa dalam pembangunan reaksi dapat dielakkan dan kecekapan dan pemeliharaan kod dapat ditingkatkan.

Atas ialah kandungan terperinci Penyelesaian kepada masalah yang memerlukan dua klik untuk mengesahkan dalam borang Log Masuk React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!