Javascript 我的状态打开所有子菜单，但我只想打开一个子菜单

我有一个左菜单，当你点击一个元素时，该元素的子菜单就会出现

但对于我的实际代码，当单击一个元素时，我的所有子菜单都会出现

我知道我的方法不对，但我不知道怎么做：(

我的示例代码：

import { useState } from 'react'

export default function Menu(){
 const [visibleSubCategorie, setVisibleSubCategorie] = useState(false)

 const Menu = [{
    name: 'Homme', link : '/homme-fr', subCategory: false
 }, {
    name: 'Femme', link : '/femme-fr', subCategory: [{
        name: 'haut', link : '/femme-haut-fr'
    },{
        name: 'bas', link : '/femme-bas-fr'
    }]
 },{
    name: 'Enfant', link : '/enfant-fr', subCategory: [{
        name: 'haut', link : '/enfant-haut-fr'
    },{
        name: 'bas', link : '/enfant-bas-fr'
    }]
 }]
 console.log("Menu -> Menu", Menu)

 return(
    <>
    {Menu.map(item=>
        <div>
            {item.subCategory ?
            <>
                <button type="button"  onClick={() => setVisibleSubCategorie(!visibleSubCategorie)}>{item.name}</button>
                {visibleSubCategorie && item.subCategory.map(subCategorys=>
                    <>
                        <p>{subCategorys.name}</p>
                    </>
                )}
            </>
            :
            <a href={item.link}>{item.name}</a>   
            }
        </div>
    )}
    </>
)

从'react'导入{useState}
导出默认功能菜单（）{
常量[VisibleSubcategories，SetVisibleSubcategories]=useState（false）
常量菜单=[{
名称：'Homme'，链接：'/Homme fr'，子类别：false
}, {
名称：“Femme”，链接：“/Femme fr”，子类别：[{
名称：'haut'，链接：'/femme haut fr'
},{
名称：“bas”，链接：“/femme bas fr”
}]
},{
名称：“儿童”，链接：“/Enfant fr”，子类别：[{
姓名：'haut'，链接：'/enfant haut fr'
},{
名称：'bas'，链接：'/enfant bas fr'
}]
}]
日志（“菜单->菜单”，菜单）
返回(
{Menu.map（项=>
{item.subCategory？
setVisibleSubCategorie（！visibleSubCategorie）}>{item.name}
{visibleSubCategorie&&item.subCategory.map（subcategories=>
{subcategoris.name}

)}
:
}
)}
)

}``

示例：当我单击“Femme”按钮查看Femme的子类别时，就像我也单击了“Enfant”按钮一样

---

我可以创建一个组件并使usestate“const[VisibleSubcategories，SetVisibleSubcategories]=usestate（false）”在地图内部和该组件内部，但我知道存在另一种方法。

您正在使用同一条状态来控制所有子类别。一种可能的解决方案是使用状态作为每个子类别的字符串值数组

const [visibleSubCategorie, setVisibleSubCategorie] = useState([])

setVisibleSubCategorie([...visibleSubCategorie, subCategorys.name])

然后检查数组中是否存在该名称，以了解是否应显示子类别

{visibleSubCategorie.includes(subCategorys.name) && item.subCategory.map(subCategorys=>

---

关闭时，您必须从数组中删除该项。

您使用的是同一条状态来控制所有子类别。一种可能的解决方案是使用状态作为每个子类别的字符串值数组

const [visibleSubCategorie, setVisibleSubCategorie] = useState([])

setVisibleSubCategorie([...visibleSubCategorie, subCategorys.name])

然后检查数组中是否存在该名称，以了解是否应显示子类别

{visibleSubCategorie.includes(subCategorys.name) && item.subCategory.map(subCategorys=>

---

然后，您必须在关闭时从数组中删除该项。

您可以使用类似于@Kyler建议的方法来解决此问题

我建议使用HOC，如下所示：

const setOpen = (setOpen, opened) => () => setOpen(!opened);

然后在JSX中：

onClick={setOpen(setVisibleSubCategorie, visibleSubCategorie)}

---

请注意，为了使其正常工作，您必须为每个部分设置状态。

您可以使用类似于@Kyler建议的方法来解决此问题

我建议使用HOC，如下所示：

const setOpen = (setOpen, opened) => () => setOpen(!opened);

然后在JSX中：

onClick={setOpen(setVisibleSubCategorie, visibleSubCategorie)}

---

请注意，为了使其工作，您必须为每个部分设置状态。

这是否回答了您的问题？这是否回答了您的问题？您是否为每个菜单创建了状态？您是否为每个菜单创建了状态？