时间戳

首页 > 解决方案 > 反应父状态不更新

javascript - 反应父状态不更新

问题描述

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

标签： javascriptreactjsstatereact-props

解决方案

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将引用类实例

推荐阅读