React parent 状态未更新

Question

状态 showMenu 一直返回 false，它没有得到更新。

在 parent 中的 console.log 之后，state 一直返回 false，而我在函数 toggleMenu() 中明确更新它。

有人可以解释一下如何解决这个问题吗？

（另外，我如何才能将这个新状态传递回我的孩子class 以改变我的 css class 那里？）

请不要将我重定向到 Whosebug 中的相关问题，我已经检查了很多问题，但概念不太正确，因此非常感谢一个例子。提前致谢

CHILD COMPONENT


class GeneralNav extends Component {
  state = {
    showMenu: false
  };

  render() {
    return (
      <EasyFlexRow style="row-space-between header-nav-justify-content nav-fixed">
        <div
          className="nav-burger-box menu-action"
          onClick={this.props.toggleMenu}
        >
          <div className="nav-burger-top" />
          <div className="nav-burger-bottom" />
        </div>
      </EasyFlexRow>
    );
  }
}



PARENT COMPONENT

class HomePage extends Component {
  state = {
    showMenu: false
  };

  toggleMenu = e => {
    e.preventDefault();
    console.log(this.state.showMenu);
    this.state.showMenu = false
      ? this.setState({ showMenu: true })
      : this.setState({ showMenu: false });
  };


render() {
    return (
      <React.Fragment>
            <GeneralNav toggleMenu={this.toggleMenu.bind(this)} />
      </React.Fragment>
    );
  }
}

Answer 1

this.state.showMenu = false
  ? this.setState({ showMenu: true })
  : this.setState({ showMenu: false });

不正确，您应该使用 === 而不是 = 进行比较，否则 this.state.showMenu = false 将始终 return 错误。所以应该是this.state.showMenu === false。

这样使用setState会更优雅

toggleMenu = e => {
  e.preventDefault();
  console.log(this.state.showMenu);
  this.setState(state => ({showMenu: !state.showMenu}));
};

请注意，您可以删除 GeneralNav 中的 state = {showMenu: false};，因为该状态已在父组件中声明。

您也可以将 toggleMenu={this.toggleMenu.bind(this)} 替换为 toggleMenu={this.toggleMenu}，因为 toggleMenu 是使用箭头函数声明的，因此 this 将引用 class 实例

React parent 状态未更新

React parent state not updating

javascript

state

reactjs

react-props