**Comment corriger l'erreur « Un composant modifie une entrée non contrôlée de type texte à contrôler » dans ReactJS ?**

ReactJS : Erreur "Un composant modifie une entrée non contrôlée de type texte à contrôler"

ReactJS impose une cohérence dans la gestion des éléments non contrôlés et des éléments d'entrée contrôlés. Comme l'indique l'avertissement, les champs de saisie ne doivent pas osciller entre ces deux états pendant la durée de vie d'un composant.

Comprendre le problème

Dans le code fourni, le problème provient du initialisation de l'état, où les champs sont initialement définis comme un objet vide, c'est-à-dire les champs : {}. Cette configuration désigne l'élément d'entrée comme une entrée non contrôlée lors du rendu initial.

Cependant, à mesure que des valeurs sont saisies dans le champ de saisie, l'objet champs de l'état est mis à jour, ce qui entraîne un passage au comportement de saisie contrôlée. Cette transition de non contrôlé à contrôlé n'est pas autorisée, conduisant à l'avertissement.

Solutions possibles

Solution 1 : Initialiser les champs avec une chaîne vide

Corrigez l'initialisation de l'état pour inclure une chaîne vide pour le champ de nom, en vous assurant que l'entrée est contrôlée dès le début :

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

Solution 2 : implémenter une évaluation de court-circuit

Au lieu de vous fier uniquement à l'état, utilisez une évaluation de court-circuit pour définir la valeur d'entrée comme une chaîne vide si la valeur de l'état n'est pas définie :

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

Cela garantit que le champ de saisie reste contrôlé même si la valeur de l'état initial n'est pas définie.

En mettant en œuvre ces suggestions, l'avertissement sera résolu, garantissant que les entrées sont traitées de manière cohérente et conformément aux attentes de ReactJS.

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!