Oui il y en a, car setState
ça marche d'une asynchronous
certaine manière. Cela signifie qu'après avoir appelé setState
lethis.state
variable n'est pas immédiatement modifiée. donc si vous souhaitez effectuer une action immédiatement après avoir défini l'état sur une variable d'état et ensuite renvoyer un résultat, un rappel sera utile
Prenons l'exemple ci-dessous
....
changeTitle: function changeTitle (event) {
this.setState({ title: event.target.value });
this.validateTitle();
},
validateTitle: function validateTitle () {
if (this.state.title.length === 0) {
this.setState({ titleError: "Title can't be blank" });
}
},
....
Le code ci-dessus peut ne pas fonctionner comme prévu car la title
variable n'a peut-être pas muté avant que la validation ne soit effectuée. Vous vous demandez peut-être maintenant que nous pouvons effectuer la validation dans lerender()
fonction elle-même, mais ce serait mieux et plus propre si nous pouvons gérer cela dans la fonction changeTitle elle-même, car cela rendrait votre code plus organisé et compréhensible
Dans ce cas, le rappel est utile
....
changeTitle: function changeTitle (event) {
this.setState({ title: event.target.value }, function() {
this.validateTitle();
});
},
validateTitle: function validateTitle () {
if (this.state.title.length === 0) {
this.setState({ titleError: "Title can't be blank" });
}
},
....
Un autre exemple sera quand vous voulez dispatch
et agir lorsque l'état a changé. vous voudrez le faire dans un rappel et non pas render()
comme il sera appelé à chaque fois qu'un nouveau rendu se produit et par conséquent, de nombreux scénarios de ce type sont possibles où vous aurez besoin d'un rappel.
Un autre cas est un API Call
Un cas peut survenir lorsque vous devez effectuer un appel d'API basé sur un changement d'état particulier, si vous faites cela dans la méthode de rendu, il sera appelé à chaque onState
changement de rendu ou parce qu'un Prop transmis au Child Component
modifié.
Dans ce cas, vous voudrez utiliser a setState callback
pour transmettre la valeur d'état mise à jour à l'appel d'API
....
changeTitle: function (event) {
this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
// Call API with the updated value
}
....