Saya mengalami masalah dengan validasi formulir saya sebagai reaksi yang saya tidak tahu bagaimana menyelesaikannya, ini dia:

Saya ingin memeriksa apakah dua input sama, misalnya jika dua input email sama untuk memeriksa apakah pengguna tidak salah mengeja emailnya tetapi saya ingin validasi dinamis, saat pengguna menulis, periksa sementara.

Ada kode saya:

https://codesandbox.io/s/1v4xxqjzo3

Buka konsol dan mulailah menulis input, dan Anda akan melihat di fungsi OnChange bahwa kedua status tidak pernah sama karena sepertinya fungsi Onchange memperbarui tidak cukup cepat, tetapi jika saya meletakkan setTimeout , itu akan berfungsi karena statusnya lengkap .

0
Paul 28 Agustus 2017, 13:16

2 jawaban

Jawaban Terbaik

setState tindakan tidak sinkron.

setState() tidak segera mengubah this.state tetapi membuat transisi status tertunda. Mengakses this.state setelah memanggil metode ini berpotensi mengembalikan nilai yang ada. Tidak ada jaminan operasi panggilan yang sinkron ke setState dan panggilan dapat dikelompokkan untuk peningkatan kinerja.

Anda harus menggunakan fungsi panggilan balik setState untuk membandingkan nilai input:

onChangeInput(e) {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    }, () => console.log(this.state.mail === this.state.confMail));
  }
3
Ivan Minakov 28 Agustus 2017, 10:22

Seperti yang dijelaskan dan didemonstrasikan Ivan Minakov dalam jawaban, panggilan setState tidak serta merta langsung berlaku. Artinya, mengikuti kode sinkron tidak serta merta mengamati status baru dan Anda harus menunggu hingga panggilan balik diteruskan saat argumen kedua dari setState dipanggil (jika ada).

Pendekatan lain mungkin dengan melewatkan callback sebagai argumen pertama setState, yang memungkinkan Anda mengubah status di tempat menggunakan status saat ini. Ini juga dapat digunakan untuk dengan mudah mengatur sakelar status yang menentukan apakah input Anda cocok, mis .:

const { name, value } = e.target;

this.setState(state => {
    state[name] = value;

    if (state.mail !== state.confMail) {
        state.error = "Mail and confirmation mail do not match.";
    } else {
        state.error = undefined;
    }

    return state;
});
2
John Weisz 28 Agustus 2017, 10:30