Je suis nouveau dans React et je travaille sur le code de quelqu'un d'autre (jeté dans le grand bain).
Il y a un simple bouton avec un gestionnaire handleClick () . Je veux incrémenter un état spécifique de 1.
À cet effet, j'ai essayé:
state = {
page: 0,
}
handleClick() {
this.setState(state => ({
page: state.page + 1
}))
console.log(page)
}
mais cela produit juste une page n'est pas erreur définie .
J'ai essayé différentes combinaisons de ce qui précède, par exemple console.log (state.page) , page: page + 1 , etc. mais n'obtient aucun résultat.
Quelqu'un saurait-il comment je pourrais consigner la console pour tester si l'état est en cours de mise à jour?
4 Réponses :
Passez simplement une fonction de rappel à votre this.setState qui sera appelée après la mise à jour de l'état. Quelque chose comme ci-dessous:
this.setState(state => ({
page: state.page + 1
}), () => console.log(this.state) )
exemple de sandbox
C'est la manière (en utilisant la fonction de rappel setState).
Vous ne pouvez pas vous référer directement à la page. Vous devez utiliser une référence this.state . Essayez:
handleClick() {
this.setState(state => ({
page: state.page + 1
}))
console.log(this.state.page)
}
setState dans React est une méthode asynchrone, donc lorsque vous essayez de consolider l'état mis à jour juste après l'avoir mis à jour, console.log vous fournira l'état précédent uniquement . Donc, pour contrer, vous devez consolider l'état dans une fonction de rappel de setState comme ceci:
handleClick() {
this.setState({
page: this.state.page + 1
}, () => {
console.log(this.state.page)
})
}
Maintenant, console.log vous donnera l'état mis à jour. J'espère que cela vous aidera !!
Vous devez utiliser un rappel pour voir l'état modifié, car setState est asynchrone dans React. Selon la documentation:
setState () ne modifie pas immédiatement this.state mais crée un transition d'état en attente. Accéder à this.state après avoir appelé ceci peut potentiellement renvoyer la valeur existante. Il n'y a pas garantie du fonctionnement synchrone des appels vers setState et les appels peuvent être groupé pour des gains de performances.
handleClick = () => {
this.setState({ page: this.state.page + 1 }, () => {
console.log(this.state.page)
})
}