React - this.setState不能按預期工作，直到第二次調用函數

在我的React組件中有一個相當基本的功能，它不像預期的那樣工作。該組件本身是頁面頂部的導航欄。我想實現一個滑動菜單，通過點擊像導航欄中的漢堡包圖標觸發的移動屏幕。React - this.setState不能按預期工作，直到第二次調用函數

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

對於我只是有這個功能設置切換true和false之間的visible值，我從我的漢堡包調用的時刻。

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

問題是this.setState({ visible: !this.state.visible });直到漢堡包圖標點擊在第二時間不從false其初始值進行切換。

此處僅供參考是組件的構造函數。

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

我對React比較新，所以仍然找到我的方法。如果有人能讓我知道如何解決這個問題，我會非常感激。提前致謝！

來源

2017-08-08 mikeym

陣營批次setState調用，以提高性能，通過直接訪問舊的國家喜歡自己正在做可能無法按預期工作，以便計算新的狀態，更新您的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 }; 
    }); 
}

來源

2017-08-08 00:11:17 Dummy

感謝您的回覆。雖然這工作似乎有點複雜。使用'prevState'是標準方式來處理React中的切換/切換操作？我問，因爲我試圖從下面的巴特答覆，而不是使用回調。它也可以工作，但允許我使用'this.setState.visible'，幾乎沒有其他變化，除了添加回調。有什麼特別的情況，爲什麼這是一個不好的模式？再次感謝您的輸入！ – mikeym

**如果**通過直接訪問舊狀態來計算新狀態，則像我一樣將回調傳遞給'setState'函數，因爲React將對多個'setState'調用進行批處理（排隊）以增加性能，所以'setState'返回後，你的狀態可能不會被更新**然而**。這裏是進一步閱讀的鏈接https://facebook.github.io/react/docs/state-and-lifecycle.html#do-not-modify-state-directly – Dummy

好的。感謝您的信息和鏈接。現在開始變得更有意義了。 – mikeym

記住this.setState()是異步的。如果你想在新狀態設置後發生某些事情，你需要將它包含爲回調函數，如下所示：

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

來源

2017-08-08 00:12:48 Bart

React - this.setState不能按預期工作，直到第二次調用函數

回答

相關問題