web-dev-qa-db-fra.com

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

Avertissement: Un composant modifie une entrée non contrôlée de type texte à contrôler. Les éléments d'entrée ne doivent pas basculer de non contrôlés à contrôlés (ou vice versa). Choisissez d'utiliser un élément d'entrée contrôlé ou non contrôlé pendant la durée de vie du composant. * 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>
  )
}
javascriptreactjs
108
Riya Kapuria

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

this.state = { fields: {} }

les champs sont des objets vides. Ainsi, lors du premier rendu, this.state.fields.name sera undefined, et le champ d'entrée aura la valeur suivante:

value={undefined}

En raison de ce champ d'entrée deviendra incontrôlé.

Une fois que vous entrez une valeur en entrée, fields in state est remplacé par:

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

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

Un composant modifie une entrée non contrôlée de type texte à contrôler.

Solutions possibles:

1- Définissez la fields dans l'état comme:

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

2- Ou définissez la propriété value en utilisant Evaluation de court-circuit comme ceci:

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

Définir l'état actuel en premier ...this.state

C'est parce que lorsque vous allez attribuer un nouvel état, il peut être indéfini. donc il sera corrigé en définissant l'état en extrayant l'état actuel aussi

this.setState({...this.state, field})

S'il existe un objet dans votre état, vous devez définir l'état comme suit, supposons que vous deviez définir un nom d'utilisateur dans l'objet utilisateur.

this.setState({user:{...this.state.user, ['username']: username}})
5
NuOne