反应状态打开所有子菜单而不是仅单击一个，只想对我的所有菜单项使用一种状态答案

【问题标题】：React state open all submenu instead of only the one clicked, want to use only one state for all my menu items反应状态打开所有子菜单而不是仅单击一个，只想对我的所有菜单项使用一种状态
【发布时间】：2022-07-20 23:16:14
【问题描述】：

我有一个反应应用程序，我在组件中呈现此信息：

const navigation = [
  {
    name: "Services",
    description: "Our services",
    href: "#",
    subMenu: [
      { name: "Management" },
      { name: "Development" },
      { name: "Specialists" },
    ],
  },
  {
    name: "Experts",
    description: "our experts",
    href: "#",
    subMenu: [
      { name: "Engineers" },
      { name: "Project managers" },
      { name: "Developers" },
      { name: "Cloud solutions" },
    ],
  },

所以“描述”是每个子菜单的“标题”，“名称”是子菜单中的每个项目。

我正在设置以下状态：

 const [ShowSubMenu, setShowSubMenu] = useState(false);

这是我在组件中呈现子菜单的地方：

{navigation.map((item) => (
            <>
              <div
                onClick={() => setShowSubMenu(!ShowSubMenu)}
                className=" border-b-2 justify-between pb-4 pl-2 font-bold flex "
              >
                <h3 className=" text-roboto">{item.description}</h3>
                <div className="border-solid border-b-2"></div>
                <ChevronDownIcon
                  className={ShowSubMenu ? "rotate-90 h-5 w-5" : "h-5 w-5 "}
                />
              </div>

              <div className=" flex flex-col">
                {item.subMenu.map((sm) => (
                  <div
                    key={sm.name}
                    className={!ShowSubMenu ? "hidden" : " pl-2 pt-2"}
                  >
                    {sm.name}
                  </div>
                ))}
              </div>
            </>
          ))}

我明白了，因为我的子菜单会根据状态打开，它会打开所有子菜单。我该如何解决，以便它知道单击了哪个项目并因此只打开该项目的子项？我认为“关键”道具会让它弄清楚这一点。除非必要，否则我不想为每个项目设置单独的 useState。感谢您的帮助！

TLDR：单击更改打开所有子菜单的状态。只想使用一个 useState 语句只打开单击的项目的子菜单。

【问题讨论】：

你能为此创建一个代码框吗？
在处理称为...索引的数组时有一些非常有用的东西！因此，在这里，您可以使用应该打开的菜单的索引，而不是使用布尔值来表示您的状态。
这会帮助你stackoverflow.com/questions/71217779/…

标签： reactjs next.js tailwind-css

【解决方案1】：

只想对我的所有菜单项使用一种状态

该状态仍然需要以某种方式指示哪个元素是“打开的”。单个布尔值不存储此信息。

您可以改为跟踪状态中记录的标识符。您的记录是如何唯一标识的？ name 值？如果是这样，请将其用作状态值。像这样的：

const [ShowSubMenu, setShowSubMenu] = useState();

默认为undefined，表示当前没有元素“打开”。然后设置一个为“打开”：

setShowSubMenu(item.name)

并隐藏它：

setShowSubMenu(undefined)

或者在单行中切换，可能是这样的：

setShowSubMenu(ShowSubMenu ? undefined : item.name)

或者当点击另一个菜单并想要关闭当前打开的菜单时，可能看起来更像这样：

setShowSubMenu(ShowSubMenu === item.name ? undefined : item.name)

您可以对正在创建的各个点击处理程序进行各种调整。

然后在显示元素时，检查ShowSubMenu是否匹配元素：

className={ShowSubMenu === item.name ? "rotate-90 h-5 w-5" : "h-5 w-5 "}

【讨论】：