React-tags: Avertissement sur le composant d'entrée
J'ai un avertissement en utilisant ReactTags :
Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
in input (created by Input)
in div (created by Input)
in Input (created by ReactTags)
in div (created by ReactTags)
in div (created by ReactTags)
D'après ce qui est dit ici, nous devrions probablement changer https://github.com/i-like-robots/react-tags/blob/master/lib/Input.js#L78 par quelque chose comme :
defaultValue={query}
Qu'est-ce que tu penses?
Merci!
luciemac
Tous les 7 commentaires
J'ai le même problème, des suggestions ?
gustavohornig
le 2 oct. 2018
Je crains de ne pas avoir vu cela moi-même, pourriez-vous me dire quelle version de React vous utilisez ?
i-like-robots
le 5 oct. 2018
J'utilise React 16.3.2
luciemac
le 5 oct. 2018
@i-like-robots Je rencontre également ce problème.
estherleah
le 11 oct. 2018
J'ai ajouté un PR pour passer à defaultValue, mais si vous voulez un hack qui évite l'avertissement jusqu'à ce que cela soit corrigé, vous pouvez ajouter une méthode noop à votre classe qui utilise ReactTags et la référencer comme onChange pour votre composant. C'est moche, mais ça arrêtera les avertissements.
noOp() {
// does nothing
}
<ReactTags
tags={this.state.tags}
suggestions={this.state.suggestions}
handleAddition={this.handleTagAddition}
handleDelete={this.handleTagDelete}
inputAttributes={{ onChange: this.noOp }}
/>
chellman
le 12 oct. 2018
C'est un problème intéressant, il a été longuement discuté il y a quelques années dans https://github.com/facebook/react/issues/1118 (bien que je n'aie jamais vu cet avertissement, avec aucune version de React, y compris 16.3.2 ! )
Il n'y a rien techniquement _mauvais_ avec l'implémentation actuelle, mais je suis d'accord que les avertissements qui encombrent la console sont ennuyeux et doivent être évités.
Je ne suis pas sûr que le réglage de defaultValue soit la bonne solution car cela peut avoir des conséquences inattendues (voir https://github.com/i-like-robots/react-tags/pull/139#issuecomment-431006214 ) mais il existe potentiellement plusieurs autres solutions de contournement disponibles.
i-like-robots
le 18 oct. 2018
En examinant cela un peu plus, je peux voir que cet avertissement a 5 conditions:
C'est la première condition qui m'intéresse car par défaut ce _devrait_ évaluer à true car la valeur par défaut pour state.query est une chaîne vide. Cela devrait donc provoquer le retour anticipé de la fonction et ne pas générer d'avertissement.
Par conséquent, pour déclencher cet avertissement, j'ai dû modifier l'état par défaut (https://github.com/i-like-robots/react-tags/blob/master/lib/ReactTags.js#L35) pour en faire une valeur véridique.
L'un d'entre vous qui en souffre a-t-il un exemple qui illustre le problème afin que je puisse l'examiner de plus près ?
i-like-robots
le 18 oct. 2018
Questions connexes
famouspotatoes
·
5Commentaires
i-like-robots
·
11Commentaires
filippofilip95
·
4Commentaires
williamsidewalk
·
4Commentaires
yrik
·
4Commentaires
Commentaire le plus utile
J'ai ajouté un PR pour passer à defaultValue, mais si vous voulez un hack qui évite l'avertissement jusqu'à ce que cela soit corrigé, vous pouvez ajouter une méthode noop à votre classe qui utilise ReactTags et la référencer comme onChange pour votre composant. C'est moche, mais ça arrêtera les avertissements.