Comment corriger l'avertissement « Conversion d'entrée non contrôlée en entrée contrôlée » dans ReactJS ?

Avertissement de conversion d'entrée non contrôlée en entrée contrôlée dans ReactJS

ReactJS avertit les développeurs lorsqu'un composant transforme un élément d'entrée non contrôlé en un élément contrôlé. Cette erreur est associée au message suivant :

Attention : Un composant modifie une entrée non contrôlée de type texte à contrôler. Les éléments d'entrée ne doivent pas passer de non contrôlé à contrôlé (ou vice versa). Choisissez entre l'utilisation d'un élément d'entrée contrôlé ou non pendant toute la durée de vie du composant.

Comprendre la cause

L'erreur se produit lorsque l'état d'un composant initialise un champ de saisie comme non contrôlé (c'est-à-dire dépourvu d'accessoire de valeur contrôlée) mais définit ensuite sa valeur, le faisant passer efficacement à une entrée contrôlée.

Exemple de code

Considérez l'extrait de code suivant :

<code class="javascript">constructor(props) {
  super(props);
  this.state = {
    fields: {}
  }
}

...

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

...

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

Dans cet exemple, l'état est initialement un objet vide, ce qui rend le champ de saisie incontrôlé. Cependant, lorsque la valeur du champ est définie, l'entrée devient contrôlée, provoquant l'avertissement.

Solutions possibles

Pour résoudre le problème, envisagez les solutions suivantes :

1. Initialiser les valeurs de champ dans l'état : Définissez le champ de saisie dans l'état initial avec une valeur d'espace réservé. Par exemple :

<code class="javascript">this.state = { fields: { name: '' } }</code>

2. Utiliser l'évaluation de court-circuit : définissez la valeur prop à l'aide de l'évaluation de court-circuit pour gérer les valeurs non définies. Par exemple :

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

En mettant en œuvre ces solutions, vous pouvez vous assurer que vos éléments d'entrée restent dans un état cohérent, évitant ainsi l'erreur de conversion d'entrée incontrôlée en contrôlée.

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!