我有一个嵌套的对象数组,看起来像这样:
[
{
_Category: "Animals",
_Child: {
_Obj: [{_Title: "Monkey", _Link: "www.monkeys.com"}], [{_Title: "Monkey", _Link: "www.monkeys.com"}], etc
}
},
{
_Category: "Fruit",
_Child: {
_Obj: [{_Title: "Apple", _Link: "www.apples.com"}], [{_Title: "Pineapple", _Link: "www.pineapples.com"}], etc
}
}
]
我试图将_Title
和_Link
的每个组附加到JSX元素中。我已经能够_Categories
毫无问题地渲染,但是嵌套值给我带来了麻烦。
当我进入DevTools中的Elements时,我可以看到每个项目有11个不同的组-这是该特定类别下有多少个对象数组-但_Titles
and_Links
为空。
在下面的代码中,我映射了_Category
数据并以这种方式显示了类别。我是否需要为_Child
对象做类似的事情-也许是另一幅地图?
码:
Element = ({ cats }) => {
return (
<div>
{cats
.filter((cat) => cat._Root === "Quick Links")
.map((cat) => (
<>
<div className={"colFor-" + cat._Category}>
<h5>{cat._Category}</h5>
{cat._Child._Obj.map((item) => (
<>
<a href={item._Link}>
<p>{item._Title}</p>
</a>
<br />
</>
))}
</div>
</>
))
}
</div>
)
}
下面是cats
看起来像:
更新:正如@Dominik指出的那样,设置obj的方式不正确,因此我对其进行了更改。
根据您的样本数据,cat._Child._Obj是一个数组,其中的每个项目也是一个数组,因此我认为您需要先对数组进行展平,然后再使用map函数。
const myarr = [[{_Title: "Monkey1", _Link: "www.monkeys1.com"}], [{_Title: "Monkey2", _Link: "www.monkeys1.com"}]];
const myarrFlat = myarr.flat();
myarrFlat.map(cat => console.log(cat._Title, cat._Link));
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句