React 如何调用函数取决于特定的元素 id

问题描述

每个 li 都应该有它自己的状态，所以如果它们最多只有 2 个元素，你可以根据 li 的数量创建状态！但它很丑，当你想添加更多 li 时，它会变得一团糟 ，所以你只需创建一个定义 ListItem 的组件，每个组件都有自己的状态。

 function ListItem({data}) {
 const[showsubcat,setShowSubCat] = useState(false)

  const subcategory= ()=> setShowSubCat(prev=>!prev) 

 return (
         <>              
   <li class="list-group-item" id={data.id}    onClick={subcategory} > 
       {data.main_category}
   </li>
   {showsubcat && 
     <li>
        <i class="las la-angle-right" id="sub_category"></i> 
        {data.sub_category}
     </li>                     
    }
  </>

)
}

然后像这样在列表组件中使用它

data.map((datum, index) => <ListItem key={index} data={datum} />

解决方法

我如何才能对函数进行处理取决于元素的 id。现在，如果我单击任何单个元素，所有元素都会被单击。如何防止显示所有元素？这是我的代码

const[showsubcat,setShowSubCat] = useState(false)

   let subcategory=(()=>{

             setShowSubCat(prev=>!prev)
       }) 

my jsx

{data.map((data)=>{
                         return(
                          <>

                          <li class="list-group-item" id={data.id}    onClick={subcategory} >{data.main_category}</li>
                            {showsubcat && 
                          <li><i class="las la-angle-right" id="sub_category"></i> {data.sub_category}</li>
                          }

                          </>


                         )

看截图。我正在单击单个项目，但它显示了所有项目。