[英]Rendering Arrays in React
我试图将子数组渲染为一个单独的项目,但它一直在一个列表中渲染所有子数组项目`
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>
`这是结果
提前致谢
预期结果
按口味-甜 -酸 -苦按地区-热带 -干 -大陆 -温带 -极地
你应该添加内部列表
<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>
您需要迭代 items 中的lst
items
。 我注意到你的项目中的第一个 object 不是数组
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.