Kenapa acara Onchange dalam React Fire beberapa kali apabila input?

Acara Onchange mencetuskan beberapa kali dalam React: Perbincangan mendalam

Dalam perkembangan React, peristiwa onChange kotak input kadang -kadang secara tidak sengaja dicetuskan beberapa kali. Artikel ini akan menganalisis masalah ini secara mendalam dan memberikan penyelesaian.

Penerangan Masalah

Komponen reaksi mudah yang menguruskan keadaan menggunakan cangkuk useState dan mengemas kini keadaan dan cetakan dalam acara onChange dalam kotak input. Walau bagaimanapun, apabila memasuki watak, konsol mencetak dua kali. Fenomena ini amat jelas apabila menggunakan keadaan jenis objek, tetapi tidak berlaku apabila menggunakan keadaan jenis primitif.

Contoh kod coretan (kod masalah):

 Import React, {Usestate} dari "React";

Eksport Fungsi Default Child () {
  const [state, setState] = useState ({});

  const onChange = (event) => {
    setState ({... state, value: event.target.value});
    console.log ("onchange dicetuskan", negeri);
  };

  Kembali (
    <div>
      <input type="text" onchange="{onChange}">
    </div>
  );
}

Analisis masalah

Akar masalah ini terletak pada mod ketat React. Dalam persekitaran pembangunan, mod yang ketat melakukan dua penulisan untuk membantu pemaju menemui masalah yang berpotensi, seperti kesan sampingan yang tidak perlu.

Apabila keadaan adalah jenis objek, setState mengemas kini rujukan kepada objek, bukan nilai itu sendiri. Rendering berganda mod ketat menyebabkan peristiwa onChange dipanggil dua kali, setiap kali rujukan objek yang sama dikemas kini. Keadaan jenis asal (seperti rentetan, nombor) secara langsung mengemas kini nilai, jadi masalah ini tidak akan berlaku.

punca akar

• Kemas kini rujukan jenis objek keadaan: Apabila menggunakan objek sebagai keadaan, setState akan membuat objek baru, tetapi console.log di dalam fungsi onChange masih mencetak keadaan lama kerana mekanisme kemas kini asynchronous React. Status dikemas kini dengan nilai baru hanya semasa rendering kedua.
• Rendering dua mod yang ketat: Mod yang ketat dalam persekitaran pembangunan mencetuskan rendering dua, memburukkan masalah ini.

Penyelesaian

Elakkan menggunakan keadaan jenis objek, atau mengoptimumkan kaedah panggilan setState :

Kaedah 1: Gunakan keadaan jenis asal

Tukar keadaan ke jenis asal, seperti rentetan:

 Import React, {Usestate} dari "React";

Eksport Fungsi Default Child () {
  const [inputValue, setInputValue] = useState ("");

  const onChange = (event) => {
    setInputValue (event.target.value);
    console.log ("onchange dicetuskan", inputValue);
  };

  Kembali (
    <div>
      <input type="text" value="{inputValue}" onchange="{onChange}">
    </div>
  );
}

Kaedah 2: Gunakan kemas kini fungsional

Gunakan kemas kini fungsional setState untuk memastikan setiap kemas kini berdasarkan status terkini:

 Import React, {Usestate} dari "React";

Eksport Fungsi Default Child () {
  const [state, setState] = useState ({});

  const onChange = (event) => {
    setState ((prevstate) => ({... prevstate, nilai: event.target.value}));
    console.log ("onchange dicetuskan", negeri);
  };

  Kembali (
    <div>
      <input type="text" onchange="{onChange}">
    </div>
  );
}

Melalui kaedah di atas, masalah peristiwa onChange yang mencetuskan beberapa kali dalam React dapat diselesaikan dengan berkesan. Ingat, mod ketat dilumpuhkan dalam persekitaran pengeluaran, jadi masalah ini biasanya hanya berlaku dalam persekitaran pembangunan.

Atas ialah kandungan terperinci Kenapa acara Onchange dalam React Fire beberapa kali apabila input?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!