[英]how to add function on event onclick on array.map in react js
[英]How to integrate array.map in React Js
这是我的 Jason 数据和代码,我使用 map() 来填充我的数据但出现一些错误,下面是我的代码
var data = [
{
categorytitle: "Shoes",
category: [
{
Category1: "Boots"
},
{
Category2: "Sneakers"
},
{
Category3: "Flats"
},
{
Category4: "Booties"
},
{
Category5: "Mules"
},
{
Category6: "Heels/Pumps"
},
{
Category7: "Clogs"
},
{
Category8: "Slippers"
},
{
Category9: "Sandals"
},
{
Category10: "Sale"
},
{
Category11: "Shop All"
}
]
}
];
也请在下面找到填充代码...
{data.map((el, e) => (
<div {...el} key={e}>
<h3>{el.categorytitle}</h3>
<ul>
<li>{el.category[e]}</li>
</ul>
</div>
))}
请指导我如何在列表中显示Category1
....?
您可以执行以下操作
{data.map((ele, index) => (
<div key={"Key-"+index}>
<h3>{ele.categorytitle}</h3>
<ul>
{Array.isArray(ele.category) && ele.category.map((d, i) => (<li key={"Key-"+i}>{d[`Category${i+1}`]}
</li>))}
</ul>
</div>
))}
尝试这样的事情:您需要遍历category
数组
data[0].category.map((el, i) => {
console.log(el['Category' + i++])
console.log(i)
return el['Category' + i++];
})
const data = [{ categorytitle: "Shoes", category: [{ Category1: "Boots" }, { Category2: "Sneakers" }, { Category3: "Flats" }, { Category4: "Booties" }, { Category5: "Mules" }, { Category6: "Heels/Pumps" }, { Category7: "Clogs" }, { Category8: "Slippers" }, { Category9: "Sandals" }, { Category10: "Sale" }, { Category11: "Shop All" } ] }]; const category = data.forEach(({ category }) => { Object.values(category).map((value, index) => { console.log(value[`Category${index +1 }`]); }) });
对于 React JSX
它应该是这样的:
{data.forEach(({ category }) => {
Object.values(category).map((value, index) => {
<span> {value[`Category${index + 1}`]} </span>;
});
})}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.