Question

状态showMenu始终返回false，并且没有更新。

在我的console.log成为父项之后，状态一直返回false，而我正在使用功能toggleMenu（）对其进行清楚地更新。

有人可以解释如何解决此问题吗？

（我又如何能够将此新状态传递回我的孩子类以在那里更改css类？）

请不要将我重定向到stackoverflow中的相关问题，我已经检查了很多问题，但没有完全理解该概念，因此举个例子。预先感谢

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将始终返回false。因此应为this.state.showMenu === false。

像这样使用setState会更优雅

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

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

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

反应父状态不更新

1 个答案: