setState wird nicht gleich gesetzt in Typescript und React-Anwendung?
Heute hatte ich eine interessante Beobachtung in einer React-Anwendung. Ich wollte ein State-Objekt setzen und anschließend zur Überprüfung den Wert ausgeben. Allerdings wurde der Wert scheinbar nicht gesetzt:
this.setState( { currentDataItem: item });
console.log(item);
Die Ausgabe brachte immer noch den alten Wert. Was war da los? Nun der “Fehler” ist, dass das Setzen des States nicht synchron, sondern asynchron ist. D.h. der State wird gesetzt, es dauert ein wenig, aber die Programmausführung geht weiter.
Die Lösung ist ein Callback zu verwenden:
this.setState( { currentId : id}, () => {
console.log(this.state.currentId);
});
Dieser wird ausgelöst, sobald das Setzen des States abgeschlossen ist. Hier können dann auch abhändige States gesetzt werden.
