React.js 理解 setState()

Question

我正在學習 React.js 並閱讀 react.js 官方文檔。 官方文檔提供了一個示例，我對此有疑問：

原始代碼：

 class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // This binding is necessary to make `this` work in the callback this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button> ); } } ReactDOM.render( <Toggle />, document.getElementById('root') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

我的問題是：在 handleClick 方法中，為什么不能將 this.setState 寫為（沒有箭頭函數）：

handleClick() {
    this.setState({
      isToggleOn: !prevState.isToggleOn
    });
}

Answer 1

您不能這樣做的原因是prevState將是undefined並且您無法訪問undefined對象上的屬性鍵。 每當您想根據之前的狀態更改邏輯時，您都應該使用回調函數，這樣您就可以避免不必要的狀態直接變化。

Answer 2

在這種情況下，兩者都可以工作。 但是有時在更改前一個狀態值的狀態時會得到意外的輸出。 有關更多信息，請轉到帶有 prevState 參數的 React 的 setState 方法

你可以在那里理解。