React - this.setState funktioniert nicht wie erwartet, bis Funktion ein zweites Mal aufgerufen wird

Question

Ich habe eine ziemlich grundlegende Funktion in meiner React-Komponente, die nicht wie erwartet funktioniert. Die Komponente selbst ist eine Navigationsleiste oben auf der Seite. Ich würde gerne ein Slide-Out-Menü für mobile Bildschirme implementieren, das durch einen Klick auf ein Hamburger-Symbol ausgelöst wird, das sich so im Navi befindet.

<a href="javascript:void(0)" onClick={this.toggleMenu.bind(this)}><i className="fa fa-bars" /></a> 

Im Moment habe ich einfach diese Funktion einen visible Wert zwischen true zu umschalten einzurichten und false, die ich von meinem Hamburger nenne.

toggleMenu() { 
    console.log('Burger clicked... ', this.state.visible); 
    this.setState({ visible: !this.state.visible }); 
    console.log('Visible changed.. ', this.state.visible); 
    var value = "A message from the burger..."; 
    this.props.sendData(value, this.state.visible); 
    } 

Das Problem ist this.setState({ visible: !this.state.visible }); von seinem Anfangswert von false schaltet nicht, bis das Hamburgere Symbol ein zweites Mal angeklickt wird.

Nur als Referenz hier ist der Konstruktor der Komponente.

Ich bin relativ neu zu reagieren, so immer noch finden mich aus. Wenn mir jemand sagen könnte, wie ich dieses Problem lösen könnte, wäre ich sehr dankbar. Danke im Voraus!

Answer 1

Reagieren ChargensetState Anrufe Leistung zu erhöhen, so durch direkt Ihren neuen Zustand der Berechnung des alten Zustand zugreifen, wie Sie möglicherweise nicht wie erwartet tun, aktualisieren Sie Ihren toggleMenu wie diese

toggleMenu() { 
    console.log('Burger clicked... ', this.state.visible); 
    this.setState(prevState => { 
     console.log('Visible changed.. ', !prevState.visible); 
     var value = "A message from the burger..."; 
     this.props.sendData(value, !prevState.visible); 
     return {visible: !prevState.visible }; 
    }); 
} 

Answer 2

Denken Sie daran, dass this.setState() asynchron ist. Wenn Sie möchten, dass nach dem Festlegen des neuen Status etwas passiert, müssen Sie es als Callback-Funktion einfügen: