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

Question

我有一个左侧菜单，当您单击某个元素时，将显示该元素的子菜单。

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

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

我的示例代码：

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>

    )}

    </>

)

}``

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

我可以创建一个组合体，并使使用状态“const [visibleSubCategorie， setVisibleSubCategorie] = useState（false）”，并且这个组合体在映射内，但我知道存在另一种方法。

Answer 1

您正在使用同一条状态来控制所有子类别。一种可能的解决方案是将State用作每个子类别的字符串值数组。const [visibleSubCategorie, setVisibleSubCategorie] = useState([])setVisibleSubCategorie([...visibleSubCategorie, subCategorys.name])然后检查数组中是否存在该名称，以了解是否应显示子类别。{visibleSubCategorie.includes(subCategorys.name) && item.subCategory.map(subCategorys=>然后，您必须在关闭时从数组中删除该项目。

Answer 2

您可以使用类似于@Kyler建议的方法解决此问题。我建议使用HOC，如下所示：const&nbsp;setOpen&nbsp;=&nbsp;(setOpen,&nbsp;opened)&nbsp;=>&nbsp;()&nbsp;=>&nbsp;setOpen(!opened);然后在你的JSX中：onClick={setOpen(setVisibleSubCategorie,&nbsp;visibleSubCategorie)}请注意，为了使此功能正常工作，您必须为每个部分提供状态。