javascript - React - this.setState 在第二次调用函数之前无法按预期工作

Question

我的 React 组件中有一个相当基本的功能没有按预期工作。该组件本身是页面顶部的导航栏。我想为移动屏幕实现一个滑出菜单，通过点击导航内的汉堡包图标触发。

<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 的新手，所以还在摸索中。如果有人能让我知道如何解决这个问题，我将不胜感激。提前致谢!

Answer 1

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