handleClick(event) {
let value = event.target.value;
this.setState({ question: (this.state.question += value) });
I get a warning:
Do not mutate state directly. Use setState()
react/no-direct-mutation-state
if I try to load the page with this code.
How can I fix it so it doesn't give me this warning?
It says to use this.setState, but that's what I'm doing.
3 Réponses :
L'erreur est ici: + = est l'opérateur utilisé pour ajouter un opérande à droite à l'opérande gauche. Vous essayez d'ajouter de la valeur à ceci.state.Question. La bonne façon de le faire est la suivante:
Généralement, c'est vrai, bien que je suggère d'utiliser la version de fonction de SSTATE car il est modifié en fonction de l'état précédent. Quelque chose comme ceci: this.setstate (état => ({question: état.Questtion + valeur})); . Cela deviendra plus nécessaire une fois que la réaction simultanée est libérée.
@Namzz Si je le fais, alors l'état se met à jour uniquement pour le 2e dernier bouton que j'ai appuyé non le dernier. Par exemple (c'est une calculatrice) quand c'est + = il affiche le dernier bouton que j'ai enfoncé. Quand je l'ai changé en +, il n'a montré que le deuxième dernier bouton.
Vous faites un addition à réagir peut être associé à plusieurs instates multiples () dans une seule mise à jour pour la performance. Parce que cela.Props et cela.State peut être mis à jour de manière asynchrone, vous ne devez pas compter sur leurs valeurs pour calculer l'état suivant.
Le moyen approprié de mettre à jour l'état basé sur une valeur précédente consiste à transmettre une fonction de mise à jour qui fonctionne de la valeur précédente, c'est-à-dire .: this.state.Question - vous n'avez besoin que d'addition ici. En outre, lors de la mise à jour de l'état basé sur une valeur antérieure, State Docs :
Ceci est considéré comme un état de mutation car vous attribuez une valeur à ceci.state.Question.Question dans l'expression (this.state.Question + = valeur) . J'ai collé un lien vers une boîte à sable de code que vous pouvez afficher pour voir comment implémenter correctement ce comportement.
cela.state.Question + valeur