Pourquoi l'événement Onchange dans React Fire plusieurs fois lors de la saisie?

L'événement Onchange se déclenche plusieurs fois dans React: Discussion approfondie

Dans le développement de React, l'événement onChange de la boîte d'entrée est parfois déclenché accidentellement plusieurs fois. Cet article analysera ce problème en profondeur et fournira une solution.

Description du problème

Un composant de réaction simple qui gère l'état à l'aide useState et met à jour l'état et imprime dans onChange dans la zone d'entrée. Cependant, lors de la saisie d'un personnage, la console imprime deux fois. Ce phénomène est particulièrement évident lors de l'utilisation d'états de type objet, mais ne se produit pas lors de l'utilisation d'états de type primitif.

Exemple d'extrait de code (code de problème):

 Importer React, {UseState} de "React";

Exporter la fonction default child () {
  const [state, setState] = UseState ({});

  const onchange = (event) => {
    setState ({... état, valeur: event.target.value});
    Console.log ("Onchange déclenché", État);
  };

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

Analyse des problèmes

La racine de ce problème réside dans le mode strict de React. Dans un environnement de développement, le mode strict effectue deux rendus pour aider les développeurs à découvrir des problèmes potentiels, tels que des effets secondaires inutiles.

Lorsque l'état est type d'objet, setState met à jour la référence à l'objet, pas la valeur elle-même. Le double rendu du mode strict fait que onChange est appelé deux fois, chaque fois que la même référence d'objet est mise à jour. L'état de type d'origine (tel que les chaînes, les nombres) met directement à jour la valeur, donc ce problème ne se produira pas.

cause première

• Mise à jour de référence de l'état du type d'objet: Lors de l'utilisation d'un objet comme état, setState créera un nouvel objet, mais console.log à l'intérieur de la fonction onChange imprime toujours l'ancien état en raison du mécanisme de mise à jour asynchrone de React. Le statut est mis à jour sur une nouvelle valeur uniquement lors du deuxième rendu.
• Double rendu de mode strict: le mode strict dans l'environnement de développement déclenche le rendu double, exacerbant ce problème.

Solution

Évitez d'utiliser l'état de type d'objet ou optimisez la méthode d'appel de setState :

Méthode 1: Utilisez l'état de type d'origine

Changez l'état en type d'origine, comme une chaîne:

 Importer React, {UseState} de "React";

Exporter la fonction default child () {
  const [inputValue, setInputValue] = UseState ("");

  const onchange = (event) => {
    setInputValue (event.target.Value);
    Console.log ("OnChange déclenché", InputValue);
  };

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

Méthode 2: Utilisez des mises à jour fonctionnelles

Utilisez des mises à jour fonctionnelles setState pour vous assurer que chaque mise à jour est basée sur le dernier état:

 Importer React, {UseState} de "React";

Exporter la fonction default child () {
  const [state, setState] = UseState ({});

  const onchange = (event) => {
    setState ((prevState) => ({... prevState, valeur: event.target.value}));
    Console.log ("Onchange déclenché", État);
  };

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

Grâce aux méthodes ci-dessus, le problème du déclenchement des événements onChange plusieurs fois dans React peut être résolu efficacement. N'oubliez pas que le mode strict est désactivé dans les environnements de production, donc ce problème ne se produit généralement que dans les environnements de développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!