React状态已更新但元素未更新：下拉菜单点击链接不消失问题

我是React新手，遇到一个问题：点击下拉菜单里的链接时，菜单本该消失，但UI始终没更新。排查后发现onClick事件已经触发，状态值也传过去了，但菜单的display属性一直没从block变回none。

带onClick事件的链接代码 #

const link = items.url ? (
  items.url.includes("http") ? (
    <a href={items.url}>{linkContents}</a>
  ) : (
    <Link onClick={handleLinkClick} to={items.url}>{linkContents}</Link>
  )
) : (
  <div>{linkContents}</div>
);

return (
  <div className="relative bg-primary-white text-palette-base" ref={ref}>
    {items.submenu ? (
      <>
        <button
          title="dropDown"
          type="button"
          aria-expanded={dropdownOpen ? "true" : "false"}
          onClick={ handleLinkClick }
        >
          {depthLevel > 0 ? menuContent : chevronIcon}
        </button>
        <Dropdown
          submenus={items.submenu}
          dropdownState={dropdownOpen}
          depthLevel={depthLevel}
          customContent={items.customContent}
        />
      </>
    ) : (
      link
    )}
  </div>
);

控制菜单display的代码 #

return (
  <div
    className={`p-2 absolute right-0 z-50 min-w-full list-none self-end rounded-lg border-solid border-2 origin-top animate-growDown shadow-md bg-palette-fill text-palette-base`}
    style={{ display: dropdownState ? "block" : "none" }}
  >
    {customContent || (
      <>
        {submenus.map(
          (submenu: MenuProps, index: React.Key | null | undefined) => (
            <Menu items={submenu} key={index} depthLevel={depthLevel} />
          )
        )}
      </>
    )}
  </div>
);

状态更新函数 #

const handleLinkClick = () => {
  console.log("Link clicked");
  setMenuState((prevState) => ({
    dropDownOpen: !prevState.dropDownOpen,
    chevronOpen: !prevState.chevronOpen,
  }));
};

问题排查与解决方案 #

1. 状态变量名大小写不匹配
   注意到你给Dropdown组件传递的是dropdownOpen，但状态更新时操作的是dropDownOpen（首字母D大写）。检查状态定义，确保传递给Dropdown的dropdownState和状态变量名完全一致。如果状态里是dropDownOpen，传递时要写成dropdownState={dropDownOpen}。

2. 点击链接时强制关闭菜单而非切换状态
   当前handleLinkClick是切换状态（取反），但点击链接时无论之前菜单状态如何，都应该直接关闭。修改函数：

   const handleLinkClick = () => {
     console.log("Link clicked");
     setMenuState((prevState) => ({
       ...prevState,
       dropDownOpen: false,
       chevronOpen: false,
     }));
   };
   

3. 检查状态传递层级
   如果Menu组件是多层嵌套结构，要确保dropdownOpen状态能正确传递到最外层的Dropdown组件，避免传递过程中被覆盖或丢失。

4. 确认状态更新的不可变性
   确保setMenuState是通过返回新对象的方式更新状态（当前写法是正确的），同时检查状态是否用useState正确初始化。

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