Close

5. Mai 2017

Reacts setState ist nicht synchron

Schöne, synchrone Welt. Oder doch nicht? Manchmal passiert es, da denkt man, dass ein Methodenaufruf synchron ist. In Wirklichkeit ist er’s aber garnicht. Dokumentation nicht gelesen? Vielleicht.

Aber nun das eigentliche Problem; wir updaten den React State und greifen direkt oder indirekt wieder darauf zu. Da React setState aber nicht direkt verändert, sondern in eine transition übergeht, kann ein Zugriff auf State den geänderten Wert, aber auch noch den vorherigen enthalten. Das passiert (side-note), um mehrere und möglicherweise schnell folgende Mutations des state effizient abzuhandeln, ergo render nur einmal auszuführen und Aufwand einzusparen.

Die Lösung

Das Rätsels Lösung ist einfach; setState in welcher Form auch immer hat als zweiten Parameter einen callback, mit dem sicher davon ausgegangen werden kann, dass die State-transition abgeschlossen ist und der neue State verfügbar ist.

 

Das ganze in Code:


// ...

increment () {

  // assuming counter was 0  

  this.setState({
    counter: this.state.counter++
  });


  console.log(this.state.counter); // might log 0 still


  this.setState({
    counter: this.state.counter++
  }, () => console.log(this.state.counter)); // will log 2
}

// ...

Mehr dazu https://facebook.github.io/react/docs/react-component.html#setstate

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.