ReactJS导航栏菜单首次点击无响应，需双击才能打开问题求助

问题根源 #

你现在的问题是状态管理脱节：Navbar组件用openMenu控制Menu的渲染，但Menu自己又维护了closeMenu状态来控制菜单内容的显示。当点击关闭按钮时，只是把Menu内部的closeMenu设为false，菜单内容隐藏，但Navbar的openMenu还是true——此时Menu组件依然存在于DOM中（只是内容不可见）。

下次点击打开按钮时：

1. 第一次点击会把openMenu改成false，Menu组件被卸载，但用户看不到菜单出现；
2. 第二次点击把openMenu改回true，Menu重新挂载并显示，所以需要双击才能生效。

解决方案 #

把菜单的显示/隐藏状态统一交给Navbar管理，移除Menu内部的独立状态，通过props传递关闭回调：

修改后的NavBar.js

function Navbar() {
  const [openProfile, setOpenProfile] = useState(false);
  const [openMenu, setOpenMenu] = useState(false);

  return (
    <nav className="nav">
      <div className="navbar-menu">
        <button className="float-on-hover" onClick={() => setOpenMenu(!openMenu)}>
          <FontAwesomeIcon icon={faNavicon} className="fa-2x" />
        </button>
        {/* 传递关闭回调给Menu */}
        {openMenu && <Menu onClose={() => setOpenMenu(false)} />}
      </div>

      <div className="navbar-user">
        <button className="float-on-hover" onClick={() => setOpenProfile(!openProfile)}>
          {" "}
          <FontAwesomeIcon icon={faUserCircle} className="fa-2x" />
        </button>

        {openProfile && <Dropdown />}
      </div>
    </nav>
  );
}

修改后的Menu.js

// 接收父组件传递的onClose回调
function Menu({ onClose }) {
  // 移除内部的closeMenu状态
  return (
    <div className="menu__page">
      <div className="close__button">
        {/* 点击关闭按钮时调用父组件的回调 */}
        <button onClick={onClose}>
          <FontAwesomeIcon icon={faClose} className="fa-2x" />
        </button>
      </div>
      
      <div className="menu__content">
        <div className="menu__items">
          <ul>
            <li>
              <a href="#" className="link__item">HOME</a>
            </li>
            <li>
              <a href="#" className="link__item">STANDARD</a>
            </li>
            <li>
              <a href="#" className="link__item">PREMIUM</a>
            </li>
            <li>
              <a href="#" className="link__item">LUXURY</a>
            </li>
            <li>
              <a href="#" className="link__item">WISHLIST</a>
            </li>
            <li>
              <a href="#" className="link__item">CONTACT</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}

修改说明 #

• 移除Menu内部的closeMenu状态，让菜单的显示/隐藏完全由Navbar的openMenu控制，避免状态不一致。
• 通过onClose回调，点击关闭按钮时直接更新Navbar的openMenu为false，Menu会被卸载，下次点击打开按钮时，openMenu变为true，Menu重新挂载，一次点击就能正常显示菜单。

内容的提问来源于stack exchange，提问作者Waafa Oueslati