我试图映射对象数组,每个数组包含另一个嵌套的对象数组。但是,该映射不适用于嵌套数组。我如何在嵌套数组的内容上进行映射,同时使所有的父对象保持content相同title?
content
title
小提琴: https : //jsfiddle.net/69z2wepo/249197/
数据结构如下:
[ { title: "title1", content: [ { imageUrl: "http://placehold.it/300x300", title: "Campaigns", description: "Short description explaining the use of this design in a single sentence." }, { imageUrl: "http://placehold.it/300x300", title: "Events", description: "Short description explaining the use of this design in a single sentence." }, { imageUrl: "http://placehold.it/300x300", title: "General", description: "Short description explaining the use of this design in a single sentence." } ] }, { title: "title2", content: [ { imageUrl: "http://placehold.it/300x300", title: "Video Template A", description: "Short description explaining the use of this design in a single sentence." }, { imageUrl: "http://placehold.it/300x300", title: "Video Template A", description: "Short description explaining the use of this design in a single sentence." } ] } ];
地图看起来像
{dataItems.map((item, index) => { return ( <h1>{item.title}</h1> // for each item, loop over the content array objects <img src={item.content.imageUrl} /> <h3>{item.content.title}</h3> <h3>{item.content.description}</h3> <hr /> ); })}
由于每个元素都有一个content数组,因此您也必须map结束content。
map
例
{dataItems.map((item, index) => ( <div key={index}> <h1>{item.title}</h1> {item.content.map((c, i) => ( <div key={i}> <img src={c.imageUrl} /> <h3>{c.title}</h3> <h3>{c.description}</h3> <hr /> </div> ))} </div> ))}