每个li都应该有自己的状态，所以要么基于li的数量创建状态，要么最多只有2个元素！但它很难看，当你想增加更多的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>                     
    }
  </>
)
}

在List组件中使用它，如下所示

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

更新后编辑(误解)

列表项(或包含li和helper文本的块)应该是管理其自身状态的独立组件。

function PostAds(data) => {
  return ( 
   <>
   {
   data.map((data, index) => <ListItem key={index} data {data}/> 
   }
   </>
  )
}
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>                     
      }
    </>
)

}