Comment éviter l'« erreur de transition d'entrée non contrôlée à entrée contrôlée » dans ReactJS ?

Erreur de transition d'entrée non contrôlée à entrée contrôlée dans ReactJS

React met en garde contre la commutation entre des éléments d'entrée non contrôlés et contrôlés. Cette erreur se produit généralement lorsqu'un champ de saisie accepte initialement la saisie de l'utilisateur librement (non contrôlée), puis que le développeur tente ultérieurement de contrôler sa valeur via l'état (contrôlé).

Extrait de code :

L'erreur est illustrée par le code suivant :

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

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")}
        className="form-control"
        type="text"
        refs="name"
        placeholder="Name *"
      />
    </div>
  )
}</code>

Cause première :

Dans ce code, le problème réside dans l'état initial où les champs sont initialisé comme un objet vide. Lors du premier rendu du composant, this.state.fields.name n'est pas défini, ce qui fait de l'entrée un composant non contrôlé. Cependant, lorsque l'utilisateur saisit une valeur, les champs sont mis à jour, ce qui rend la saisie contrôlée.

Solutions possibles :

Pour résoudre cette erreur, il existe deux options :

1. Initialiser les champs avec une valeur par défaut :

   Définir les champs à l'état initial avec une valeur par défaut :

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

2. Utiliser l'évaluation de court-circuit :

   Utiliser l'évaluation de court-circuit dans l'attribut value pour fournir une valeur par défaut lorsque this.state.fields.name n'est pas défini :

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

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!