我必須用存盤為 JSON 物件的資料填充 li 元素。有了“標題”，它的作業很簡單。但這不是談論名稱的價值。如何映射 subMenu 物件以獲取名稱？
<ul>
{data.map(({ title, subMenu }) => (
<li className="mobileMenu-body-nav-item">
<button className="mobileMenu-body-nav-item-btn">
*** here I have to put name ***
</button>
</li>
))}
</ul>
JSON 物件
[
{
"title": "Breeds",
"subMenu": [
{
"id": 1,
"name": "Dog Breeds"
},
{
"id": 2,
"name": "Cat Breeds"
}
]
},
{
"title": "About Pet Adoption",
"subMenu": [
{
"id": 3,
"name": "About Dog Adoption"
},
{
"id": 4,
"name": "About Cat Adoption"
}
]
}
]
uj5u.com熱心網友回復：
您可以map再次呼叫，如下所示：
<ul>
{data.map(({ title, subMenu }) => (
<li className="mobileMenu-body-nav-item">
<button className="mobileMenu-body-nav-item-btn">
{subMenu.map(({ name }) => (<span>{name}</span>))}
</button>
</li>
))}
</ul>
更改<span>標簽以匹配您希望呈現的內容。
另外，如果這是 React，請不要忘記在使用時適當設定keypropmap：
<ul>
{data.map(({ title, subMenu }) => (
<li key={title} className="mobileMenu-body-nav-item">
<button className="mobileMenu-body-nav-item-btn">
{subMenu.map(({ name }) => (<div key={name}>{name}</div>))}
</button>
</li>
))}
</ul>
uj5u.com熱心網友回復：
正如對已接受的答案div元素的評論中所指出的，不是buttons（相關問題）的有效子元素，雖然應該key使用迭代陣列的索引為 React 中的映射元素分配 a并不總是理想的。（請參閱TJCrowder 評論中的檔案或相關文章）。
鑒于您正在映射嵌套串列，因此將其結構化似乎更合適。這里使用 thetitle作為外li鍵（盡管更明確的唯一屬性會更好）和subMenu.id作為內鍵的鍵li。
<ul>
{data.map(({ title, subMenu }) => (
<li key={title} className='mobileMenu-body-nav-item'>
<ul>
{subMenu.map(({ id, name }) => (
<li key={id}>
<button className='mobileMenu-body-nav-item-btn'>{name}</button>
</li>
))}
</ul>
</li>
))}
</ul>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/345099.html
標籤：javascript
上一篇：處理陣列中的資料的問題，反應