Warum feuert das Onchange -Ereignis in React mehrmals bei der Eingabe ein?

OnChange-Event löst in React mehrmals aus: Eingehende Diskussion

In der React -Entwicklung wird das onChange -Ereignis des Eingangsfelds manchmal versehentlich mehrmals ausgelöst. Dieser Artikel wird dieses Problem eingehend analysieren und eine Lösung bereitstellen.

Problembeschreibung

Eine einfache React -Komponente, die den Status mithilfe useState -Hooks verwaltet und den Status aktualisiert und im onChange -Ereignis im Eingabefeld gedruckt wird. Bei der Eingabe eines Charakters druckt die Konsole jedoch zweimal. Dieses Phänomen ist besonders offensichtlich bei der Verwendung von Objekttypzuständen, tritt jedoch bei der Verwendung primitiver Typzustände nicht auf.

Beispielcode -Snippet (Problemcode):

 reag import, {usestate} aus "react";

Exportieren Sie die Standardfunktion von Child () {
  const [state, setState] = usestate ({});

  const onchange = (Ereignis) => {
    setState ({... Status, Wert: event.target.Value});
    console.log ("onchange ausgelöst", Zustand);
  };

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

Problemanalyse

Die Wurzel dieses Problems liegt im strengen Modus von React. In einer Entwicklungsumgebung führt der strenge Modus zwei Renderings durch, um Entwicklern dabei zu helfen, potenzielle Probleme wie unnötige Nebenwirkungen zu entdecken.

Wenn der Status Objekttyp ist, aktualisiert setState die Referenz auf das Objekt und nicht den Wert selbst. Durch die doppelte Renderung des strengen Modus wird onChange -Ereignis zweimal aufgerufen, jedes Mal, wenn dieselbe Objektreferenz aktualisiert wird. Der ursprüngliche Zustandstatus (z. B. Zeichenfolgen, Zahlen) aktualisiert direkt den Wert, sodass dieses Problem nicht auftritt.

Grundursache

• Referenzaktualisierung des Objekttypstatus: Wenn ein Objekt als Status verwendet wird, erstellt setState ein neues Objekt, aber console.log in der onChange -Funktion druckt den alten Status aufgrund des asynchronen Aktualisierungsmechanismus von React weiterhin. Der Status wird nur während des zweiten Renderings auf einen neuen Wert aktualisiert.
• Doppelter Rendering des strengen Modus: Strenge Modus in der Entwicklungsumgebung löst das doppelte Rendering aus und verschärft dieses Problem.

Lösung

Vermeiden Sie den Objekttypstatus oder optimieren Sie die Aufrufmethode von setState :

Methode 1: Verwenden Sie den ursprünglichen Status des Typs

Ändern Sie den Status in den ursprünglichen Typ, z. B. eine Zeichenfolge:

 reag import, {usestate} aus "react";

Exportieren Sie die Standardfunktion von Child () {
  const [inputValue, setInputValue] = usustate ("");

  const onchange = (Ereignis) => {
    setInputValue (Event.Target.Value);
    console.log ("onchange ausgelöst", InputValue);
  };

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

Methode 2: Verwenden Sie funktionale Updates

Verwenden Sie funktionale Updates setState , um sicherzustellen, dass jedes Update auf dem neuesten Status basiert:

 reag import, {usestate} aus "react";

Exportieren Sie die Standardfunktion von Child () {
  const [state, setState] = usestate ({});

  const onchange = (Ereignis) => {
    setState ((vorhastate) => ({... prevState, value: event.target.Value}));
    console.log ("onchange ausgelöst", Zustand);
  };

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

Durch die oben genannten Methoden kann das Problem des onChange -Ereignisses, das mehrmals in React auslöst, effektiv gelöst werden. Denken Sie daran, dass der strenge Modus in Produktionsumgebungen deaktiviert ist, so dass dieses Problem normalerweise nur in Entwicklungsumgebungen auftritt.

Das obige ist der detaillierte Inhalt vonWarum feuert das Onchange -Ereignis in React mehrmals bei der Eingabe ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!