我試圖將子陣列渲染為一個單獨的專案，但它一直在一個串列中渲染所有子陣列專案`
const items = [
{ id: 1, header: "Global", lst: "All Fruits" },
{
id: 2,
header: "By Taste",
lst: ["sweet", "sour", "bitter"],
},
{
id: 3,
header: "By Region",
lst: [
"Tropical",
"dry",
"Continental",
"Temperate",
"Polar",
],
},
];
`
`
<ul className="dd-list">
{items.map((item) => (
<div key={item.id}>
<i>{item.header}</i>
<li className="dd-list-item">
<button
type="button"
onClick={(e) => {
setSelected(item.lst);
setOpen(false);
}}
>
{item.lst}
</button>
</li>
</div>
))}
</ul>
` 這是結果
提前致謝
預期結果
按口味-甜 -酸 - 苦 按地區 -熱帶 -干 -大陸 -溫帶 -極地
uj5u.com熱心網友回復：
您應該添加內部串列
<ul className="dd-list">
{items.map((item) => (
<li key={item.id}>
<i>{item.header}</i>
<ul>
{item.lst.map((innerItem) => (
<li key={innerItem} className="dd-list-item">
<button
type="button"
onClick={(e) => {
setSelected(innerItem);
setOpen(false);
}}
>
{innerItem}
</button>
</li>
))}
</ul>
</li>
))}
</ul>
uj5u.com熱心網友回復：
您需要lst迭代items. 我注意到你的專案中的第一個物件不是陣列
解決方案
const items = [
{ id: 1, header: "Global", lst: ["All Fruits"] },
{
id: 2,
header: "By Taste",
lst: ["sweet", "sour", "bitter"],
},
{
id: 3,
header: "By Region",
lst: [
"Tropical",
"dry",
"Continental",
"Temperate",
"Polar",
],
},
];
return <ul className="dd-list">
{items.map((item) => (
<li key={item.id}>
<i>{item.header}</i>
<ul>
{item.lst.map((innerLstItems,index) => (
<li className="dd-list-item" key={index}>
<button
type="button"
onClick={(e) => {
setSelected(innerLstItems);
setOpen(false);
}}
>
{innerItem}
</button>
</li>
))}
</ul>
</li>
))}
</ul>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/535329.html
標籤：反应数组
上一篇：我需要列印一個二維字符陣列
下一篇：對一個整數陣列進行多重比較