Un composant transforme une entrée non contrôlée de type texte en erreur contrôlée dans ReactJS.

Question

Avertissement : Un composant modifie une entrée non contrôlée de type texte pour qu'elle soit contrôlée. Les éléments d'entrée ne doivent pas passer de non contrôlés à contrôlés (ou vice versa). Décidez d'utiliser un élément d'entrée contrôlé ou non contrôlé pendant toute la durée de vie du composant.*

Voici mon code :

constructor(props) {
  super(props);
  this.state = {
    fields: {},
    errors: {}
  }
  this.onSubmit = this.onSubmit.bind(this);
}

....

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 *"
      />
      <span style={{color: "red"}}>{this.state.errors["name"]}</span>
    </div>
  )
}

Answer 1

La raison est que, dans l'état que vous avez défini :

this.state = { fields: {} }

en tant qu'objet vide, de sorte que pendant le premier rendu this.state.fields.name sera undefined et la valeur du champ de saisie sera la suivante :

value={undefined}

De ce fait, le champ de saisie devient incontrôlable.

Une fois que vous avez saisi une valeur quelconque dans l'entrée, fields dans l'état se transforme en :

this.state = { fields: {name: 'xyz'} }

Et à ce moment-là, le champ de saisie est converti en un composant contrôlé ; c'est pourquoi vous obtenez l'erreur :

Un composant modifie une entrée non contrôlée de type texte pour qu'elle soit contrôlée.

Solutions possibles :

1- Définir le fields en état comme :

this.state = { fields: {name: ''} }

2- Ou définir la propriété valeur en utilisant Évaluation des courts-circuits comme ça :

value={this.state.fields.name || ''}   // (undefined || '') = ''

Answer 2

Changer value a defaultValue le résoudra.

Note :

defaultValue est seulement pour le chargement initial. Si vous voulez initialiser le input alors vous devez utiliser defaultValue mais si vous voulez utiliser state pour modifier la valeur, vous devez utiliser value . Lire ce pour plus.

J'ai utilisé value={this.state.input ||""} en input pour se débarrasser de cet avertissement.

Answer 3

À l'intérieur du composant, placez la boîte de saisie de la manière suivante.

<input className="class-name"
              type= "text"
              id="id-123"
              value={ this.state.value || "" }
              name="field-name"
              placeholder="Enter Name"
              />

Answer 4

En plus de la réponse acceptée, si vous utilisez un fichier de type input de type checkbox o radio j'ai découvert que je devais vérifier la valeur nulle ou indéfinie de l'attribut checked également.

<input
  id={myId}
  name={myName}
  type="checkbox" // or "radio"
  value={myStateValue || ''}
  checked={someBoolean ? someBoolean : false}
  />

Et si vous utilisez TS (ou Babel), vous pouvez utiliser la coalescence nulle au lieu de l'opérateur logique OR :

value={myStateValue ?? ''}
checked={someBoolean ?? false}

Answer 5

SIMPLEMENT, vous devez d'abord définir l'état initial.

Si vous ne définissez pas état initial La réaction traitera cela comme un composante incontrôlée