Sì, c'è, dal momento che setState
funziona in un asynchronous
certo senso. Ciò significa che dopo aver chiamato setState
la this.state
variabile non viene immediatamente modificata. quindi se si desidera eseguire un'azione immediatamente dopo aver impostato lo stato su una variabile di stato e quindi restituire un risultato, sarà utile una richiamata
Considera l'esempio di seguito
....
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" });
}
},
....
Il codice sopra riportato potrebbe non funzionare come previsto poiché la title
variabile potrebbe non essere stata modificata prima che la convalida venga eseguita su di essa. Ora potresti chiederti che possiamo eseguire la convalida nella render()
funzione stessa ma sarebbe meglio e in modo più pulito se potessimo gestirla nella funzione changeTitle stessa poiché ciò renderebbe il tuo codice più organizzato e comprensibile
In questo caso il callback è 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 altro esempio sarà quando vuoi dispatch
e azione quando lo stato è cambiato. vorrai farlo in un callback e non nel modo render()
in cui verrà chiamato ogni volta che si verifica il reindirizzamento e quindi molti di questi scenari sono possibili dove è necessario il callback.
Un altro caso è a API Call
Un caso può sorgere quando è necessario effettuare una chiamata API in base a un particolare cambio di stato, se lo si fa nel metodo di rendering, verrà chiamato ad ogni onState
cambio di rendering o perché alcuni Prop sono passati alla Child Component
modifica.
In questo caso, si desidera utilizzare a setState callback
per passare il valore di stato aggiornato alla chiamata API
....
changeTitle: function (event) {
this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
// Call API with the updated value
}
....