在有状态组件中切换布尔值答案

【问题标题】：toggling boolean value in stateful component在有状态组件中切换布尔值
【发布时间】：2018-11-23 11:00:12
【问题描述】：

我有一个相当简单的有状态组件，我希望每当有人点击按钮时切换它的值：

class Layout extends Component {
  state = {
    sidedrawer: false
  }

  sideDrawerCloseHandler = () => {
    this.setState({sidedrawer: false})
  }

  sideDrawerTogglerHandler = () => {
    this.setState({sidedrawer: !sidedrawer})
  }

  render () {
    return (
      <Aux>
        <Toolbar sideDrawerTogglerHandler={this.sideDrawerTogglerHandler}/>
        <SideDrawer SideDrawerOpen={this.state.sidedrawer} sideDrawerCloseHandler={this.sideDrawerCloseHandler} />
        <main className={classes.co}>
          {this.props.children}
        </main>
      </Aux>
    )
  }
}

export default Layout;

现在，当我运行我的 react 应用程序时，它会抛出一个错误：

sidedrawer 没有在第 19 行定义

有人可以帮助我修复和理解错误吗？

第 18 - 19 行恰好是我代码中的这一部分

sideDrawerTogglerHandler = () => {
  this.setState({sidedrawer: !sidedrawer})
}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您必须从您所在的州获得sidedrawer：

sideDrawerTogglerHandler = () => {
 this.setState((previousState) => {
   return {sidedrawer: !previousState.sidedrawer}
 })
}

【讨论】：

【解决方案2】：

侧边抽屉没有定义，定义的是this.state.sidedrawer，你要找的是

      sideDrawerTogglerHandler = () => {
           this.setState({sidedrawer: !this.state.sidedrawer})
      }

但这不是 setState 的最佳方法，正如 React 文档中所解释的那样，根据先前状态更新状态的最佳方法是使用 setState 和一个接收 prevState 作为道具的函数，你可以试试这个

 sideDrawerTogglerHandler = () => {
     this.setState((prevState) => ({
      sidedrawer: !prevState.sidedrawer 
    }));
   }

【讨论】：

看这里stackoverflow.com/questions/50837670/…或这里reactjs.org/docs/state-and-lifecycle.html以更好地理解
感谢您的回答。您如何看待这种方法（虽然可行，但有任何缺点）？ sideDrawerTogglerHandler = () => { let sideDrawerToggler = this.state.sideDrawer; sideDrawerToggler = !sideDrawerToggler; this.setState({sidedrawer: sideDrawerToggler}) }
如果一个人点击了两次，真的很快，在第一个 setState 执行之前，两个 sideDrawerToggler 都可以得到他们的值，所以也许，只是如果他真的很快，你不能得到错误的值。这就是为什么 react 建议以这种方式来确保您始终拥有正确的价值