Реакция родительского состояния не обновляется

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 будет ссылаться на экземпляр класса