Voici quelques options de titre, axées sur l'aspect question et le contexte ReactJS : 1. **Entrées contrôlées ou non contrôlées dans React : comment éviter l'avertissement « État de commutation » ?** 2. **Re

Erreur d'entrée contrôlée ou non contrôlée dans ReactJS

Lorsque vous travaillez avec des composants React, il est important de comprendre la distinction entre les entrées contrôlées et non contrôlées. Par défaut, les entrées ne sont pas contrôlées, ce qui signifie que leurs valeurs sont gérées par le DOM. Cependant, lorsque nous définissons l'attribut value sur une entrée, celle-ci devient une entrée contrôlée, ce qui signifie que sa valeur est gérée par React.

Si un composant rend initialement une entrée non contrôlée comme contrôlée sans définir de valeur initiale, React le fera déclenchez un avertissement comme celui que vous avez mentionné :
"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)".

Dans le code fourni :

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>
  )
}

Le problème se pose car dans le constructeur, les champs sont initialisés comme un objet vide : champs : {}. Cela signifie qu'initialement, this.state.fields.name ne sera pas défini. En conséquence, le champ de saisie sera incontrôlé. Cependant, lorsque l'utilisateur saisit une valeur, l'état est mis à jour, faisant de la saisie un composant contrôlé. Ce comportement incohérent déclenche l'avertissement React.

Solutions possibles :

1. Définissez une valeur initiale par défaut : Initialisez les champs dans le constructeur avec une valeur par défaut pour le nom, telle que "name": "". Cela garantit que le champ de saisie démarre comme un composant contrôlé avec une valeur définie.
2. Utiliser l'évaluation de court-circuit : Définissez l'attribut de valeur de l'entrée comme suit : value={this. état.fields.name || ''}. Ceci donne une chaîne vide si this.state.fields.name n'est pas défini, garantissant que le champ de saisie démarre comme contrôlé même sans valeur par défaut définie.

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!