Pourquoi est-ce que je reçois l'avertissement « Un composant modifie une entrée non contrôlée de type texte à contrôler » dans mon application ReactJS ?

Éléments d'entrée non contrôlés et contrôlés : un guide de l'avertissement ReactJS

ReactJS recommande de maintenir la cohérence dans l'état de contrôle des éléments d'entrée. Dans certains scénarios, vous pouvez rencontrer l'avertissement : « Un composant modifie une entrée non contrôlée de type texte à contrôler. » Examinons la cause et explorons des solutions efficaces.

Racine du problème

Dans ReactJS, les éléments d'entrée peuvent être contrôlés ou non. Une entrée contrôlée est une entrée dont la valeur est gérée par l'état du composant, tandis qu'une entrée non contrôlée permet aux utilisateurs de modifier directement sa valeur. Le problème survient lorsqu'une entrée initialement déclarée comme non contrôlée est ensuite transformée en entrée contrôlée.

Considérez le code suivant :

<br>class MyComponent extends React.Component {<br> constructor(props) {</p>
<pre class="brush:php;toolbar:false">super(props);
this.state = {
  fields: {}
}

}

onChange(field, e){

let fields = this.state.fields;
fields[field] = e.target.value;
this.setState({fields});

}

render() {

return(
  <div>
    <input
      value={this.state.fields["name"]}
      onChange={this.onChange.bind(this, "name")}
      type="text"
      placeholder="Name *"
    />
  </div>
)

}
}

Dans cet exemple, l'entrée 'name' n'est pas contrôlée car sa valeur est initialement indéfinie (this.state. field["name"]), permettant à l'utilisateur de le modifier librement. Cependant, lorsque l'utilisateur saisit une valeur, le gestionnaire onChange définit this.state.fields.name, faisant ainsi passer l'entrée à un état contrôlé. Ce changement d'état déclenche l'avertissement.

Résoudre le problème

Pour résoudre l'avertissement, vous pouvez soit :

1. Définissez les champs initiaux dans l'état : Déclarez this.state.fields avec une chaîne vide pour chaque champ. Cela garantit que toutes les entrées sont initialement contrôlées.

   <code class="python">class MyComponent extends React.Component {
     constructor(props) {
    super(props);
    this.state = {
      fields: {
        name: '',
      }
    }
     }
   
     // ...
   }</code>

2. Utiliser l'évaluation de court-circuit : Attribuez la valeur prop à l'aide de l'évaluation de court-circuit, qui garantit qu'un élément non défini les valeurs sont évaluées comme une chaîne vide.

   <code class="python">value={this.state.fields.name || ''}</code>

En implémentant l'une ou l'autre solution, vous pouvez éliminer l'erreur et assurer la cohérence de l'état de contrôle de vos entrées.

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!