React - 関数が2回目に呼び出されるまで、this.setStateは期待通りに機能しません。

Question

私のReactコンポーネントにはかなり基本的な機能があり、期待通りに機能しません。コンポーネント自体はページ上部のナビゲーションバーです。私は、そのようにnavの中にあるハンバーガーアイコンをクリックすることによって起動されるモバイル画面用のスライドアウトメニューを実装したいと思います。私は単にこの関数は、私は私のハンバーガーから呼び出していますtrueとfalse間visible値を、切り替えるために設定している瞬間のために

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

。

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); 
    } 

問題は、ハンバーガーのアイコンが二度目にクリックされるまで、falseの初期値から切り替わらないthis.setState({ visible: !this.state.visible });です。

ここにコンポーネントのコンストラクタがあります。

constructor() { 
    super(); 
    this.state = { 
     visible: false, 
    }; 
    } 

私はリアクションには比較的新しいので、まだ自分の道を探しています。もし誰かが私にこの問題を解決する方法を教えてもらえたら、私はとても感謝しています。前もって感謝します！

Answer 1

は覚えておいて、パフォーマンスを向上することが期待ように、あなたがやっているように、直接古い状態にアクセスすることで、あなたの新しい状態を計算すると、動作しない可能性があります、あなたのtoggleMenu

このような

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

を更新バッチsetState呼び出しに反応this.setState()は非同期です。新しい状態が設定された後に何かを実行するには、次のようにコールバック関数としてインクルードする必要があります。

this.setState({ 
    visible: !this.state.visible 
},() => { 
    // callback 
});