导航栏未隐藏到反应状态

Question

我的网站上有两个导航栏。仅在带有媒体查询的小屏幕上显示一个，这是我遇到的问题。我有一个反应上下文，可以在显示幻灯片时使用相同的布尔变量控制两个导航的可见性。显示幻灯片放映后，我想隐藏导航。大型导航具有此功能，但小型导航从未显示。在添加此反应上下文之前，导航栏将正常显示，但现在从不显示。

小型导航栏渲染：

  render() {
    return (
      <div className="container-fluid">
        <div id="initialImage">
          <div className="d-fixed d-md-none">
            <DisplayContext.Consumer>
              {(context) =>
                context.state.isNavVisibile ? (
                  <nav className="navbar bg-dark navbar-dark fixed-top">
                    <button
                      className="navbar-toggler"
                      type="button"
                      data-toggle="collapse"
                      data-target="#navbarToggleContent"
                      aria-controls="navbarToggleContent"
                      aria-expanded="false"
                      aria-label="Toggle navigation"
                    >
                      <span></span>
                      <span></span>
                      <span></span>
                    </button>
                    <div
                      className="collapse navbar-collapse"
                      id="navbarToggleContent"
                    >
                      <ul className="navbar-nav">
                        <li className="nav-item">
                          <a
                            className="nav-link text-white font-weight-bold"
                            href="#vintage"
                          >
                            Shop Vintage 
                          </a>
                        </li>
                        <li className="nav-item">
                          <a
                            className="nav-link text-white font-weight-bold"
                            href="#e"
                          >
                            Shop Euiubi
                          </a>
                        </li>
                        <li className="nav-item">
                          <a
                            className="nav-link text-white font-weight-bold"
                            href="#about"
                          >
                            A Message from the Creator
                          </a>
                        </li>
                        <li className="nav-item">
                          <a
                            className="nav-link text-white font-weight-bold"
                            href="#"
                          >
                            Contact
                          </a>
                        </li>
                      </ul>
                    </div>
                  </nav>
                ) : null
              }
            </DisplayContext.Consumer>
          </div>
          <Navigation />
          <div id="titles" className="clearfix greeting"></div>
          <ScrollAnimation />
        </div>
      </div>
    );
  }
}

显示上下文：

export const DisplayContext = createContext();

export class ContextProvider extends Component {
  state = {
    isNavVisible: true,
  };

  render() {
    return (
      <DisplayContext.Provider
        value={{
          state: this.state,
          hideNav: () =>
            this.setState({ isNavVisible: !this.state.isNavVisible }),
        }}
      >
        {this.props.children}
      </DisplayContext.Provider>
    );
  }
}

点击处理程序以打开和关闭幻灯片显示

  toggleSlideVisibility = () => {
    const dcontext = this.context;
    dcontext.hideNav();
    this.setState({ slidesVisible: !this.state.slidesVisible });
  };