Wie reagiert der Status?

Question

Ich bekomme ein sehr seltsames Problem, dass ich nicht weiß, wie ich ansprechen soll.

Ich habe eine ziemlich einfache Methode bekommt: Wenn eine Taste gedrückt wird genannt toggleInverted()

toggleInverted() { 
    if(this.state.inverted){ 
    this.setState({inverted: false}); 
    } else{ 
    console.log("got to else..."); 
    this.setState({inverted: true}); 
    console.log(this.state.inverted); 
    } 
} 

Das invertierte Feld im Konstruktor zu false initialisiert wird. Wenn ich zum ersten Mal auf die Schaltfläche klicke, wenn ich die Seite lade, wird der Status nicht korrekt zurückgesetzt. Die Ausgabe ist: got to else... false.

Also irgendwie ist es immer in dieser else-Anweisung, die Ausführung der setState, und doch nicht invertiert Einstellung um wahr zu sein ...

Gibt es etwas über setState, dass ich fehle?

Answer 1

setState ändert nicht den Zustand Ihrer Komponenten sofort. Ihre Statusänderung ist möglicherweise asynchron und daher keine Garantie dafür, dass Ihre console.log-Anweisung den geänderten Status ausgibt. setState führt jedoch immer dazu, dass die Methode render aufgerufen wird. Wenn Sie Ihren Status also in der render Methode Ihrer Komponente protokollieren, sollte Ihr Status wahr sein.

Auch this.setState({inverted: !this.state.inverted}) ist eine kürzere Version des Codes Snippit

Answer 2

setStatemay be asynchronous

Bedeutung Sie nicht die Werte von this.state erwarten können, sofort zu ändern, nachdem setState aufgerufen wird.

Um es mit dem docs:

setState() mutiert nicht sofort this.state sondern schafft einen anstehend Übergang. Zugriff auf this.state nach dieser Methode aufrufen kann möglicherweise den vorhandenen Wert zurückgeben ...

---

Als Nebenwirkung, können Sie Ihren Code Figur durch den negativen Ausdruck des aktuellen invertierten Wert wie folgt verwendet wird: