React折叠菜单点击分类标题无法同时展开面板与子链接问题

我做了一个可折叠导航菜单组件，包含分类列表，每个分类下有子链接列表，还有菜单面板展开/折叠按钮。预期点击分类标题时，菜单面板展开的同时显示对应子链接，但现在代码只能展开菜单面板，子链接要再点一次才显示。

折叠状态结构示例：

Cat A
Cat B
Cat C

展开后带子女链接的结构示例：

Category A
|
|--Link A1
|--Link A2
|--Link A3

Category B
|
|--Link B1
|--Link B2
|--Link B3

Category C
|
|--Link C1
|--Link C2
|--Link C3

菜单组件代码：

import React, { useState } from "react";
import { NavItem } from "./NavItem";

export function Navigation({
  menuItems,
}) {
  const [opened, setPanelOpened] = useState(false);

  return (
    <nav className={opened ? "expanded" : "collapsed"}>
      <button
        onClick={() => {
          setPanelOpened(!opened);
        }}
      >
        Toggle Menu
      </button>

      {menuItems.map((item) => (
        <NavItem menuItem={item} setPanelOpened={setPanelOpened} panelOpened={opened} />
      ))}
    </nav>
  );
}

分类项NavItem组件代码：

import React, { useState } from "react";

export function NavItem({
  menuItem,
  panelOpened,
  setPanelOpened,
}) {
  const [categoryOpened, setCategoryOpened] = useState(false);

  return (
    <div
      // If category is opened, should toggle a class to show / hide the children elements
      className={categoryOpened ? "opened" : "closed"}
    >
      <h2
        onClick={() => {
          // Should display the children menu items when I click the button
          setCategoryOpened(!categoryOpened);
          if (!panelOpened) {
            setPanelOpened(true);
          }
        }}
      >
        Parent Category
      </h2>

      {menuItem.children?.map((subItem) => (
        <a href={subItem.link}>
          {subItem.label}
        </a>
      ))}
    </div>
)
}

现在setCategoryOpened(!categoryOpened)和setPanelOpened(true)没法同时生效，点击分类标题只能展开面板，子链接要再点一次才显示，怎么改才能同时触发这两个状态，实现点击分类标题时面板和子链接同时展开？

问题根源在于React状态更新的异步特性，以及闭包捕获的旧状态值导致逻辑执行异常。以下是具体修改方案：

1. 改用函数式更新获取最新状态 #

在NavItem的点击事件中，对categoryOpened使用函数式更新，确保基于最新状态值修改；同时直接设置面板展开，避免依赖闭包中的旧panelOpened值判断：

// NavItem组件的h2点击事件修改为：
onClick={() => {
  // 函数式更新保证拿到最新的categoryOpened状态
  setCategoryOpened(prevState => !prevState);
  // 直接展开面板，无需判断旧状态
  setPanelOpened(true);
}}

2. 优化子链接显示逻辑 #

增加双重判断：只有当面板展开（panelOpened为true）且当前分类展开（categoryOpened为true）时，才渲染子链接，避免状态不同步导致的显示异常：

{panelOpened && categoryOpened && menuItem.children?.map((subItem) => (
  <a key={subItem.link} href={subItem.link}>
    {subItem.label}
  </a>
))}

3. 修复分类标题显示 #

把固定的Parent Category改成显示传入的menuItem标题，符合实际业务逻辑：

<h2 onClick={...}>
  {menuItem.label}
</h2>

完整修改后的NavItem组件 #

import React, { useState } from "react";

export function NavItem({
  menuItem,
  panelOpened,
  setPanelOpened,
}) {
  const [categoryOpened, setCategoryOpened] = useState(false);

  return (
    <div className={categoryOpened ? "opened" : "closed"}>
      <h2
        onClick={() => {
          setCategoryOpened(prevState => !prevState);
          setPanelOpened(true);
        }}
      >
        {menuItem.label}
      </h2>

      {panelOpened && categoryOpened && menuItem.children?.map((subItem) => (
        <a key={subItem.link} href={subItem.link}>
          {subItem.label}
        </a>
      ))}
    </div>
  )
}

为什么之前的代码失效？ #

React的状态更新是异步批量处理的，同一个点击事件中同时调用setCategoryOpened和setPanelOpened时，父组件的opened状态更新会触发子组件重新渲染，而此时子组件的categoryOpened状态更新还未在当前周期生效，导致第一次点击后子链接仍处于隐藏状态。改用函数式更新能确保状态修改基于最新值，直接设置setPanelOpened(true)则避免了闭包捕获旧值的问题。

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