Question

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

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

目前我只是将此功能设置为在visible和true之间切换false值，我将从汉堡包中调用。

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

发起批量 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 };
    });
}

Answer 2

请记住this.setState()是异步的。如果您希望在设置新状态后发生某些事情，则需要将其作为回调函数包含在内，如下所示：

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

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

2 个答案: