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 批处理 setState 调用以提高性能，因此通过直接访问旧状态来计算新状态(就像您所做的那样)可能无法按预期工作，请更新您的 切换菜单像这样

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