Question

ReactJS新手在这里。基本上，我有一个数组。然后是其中的另一个数组。请看下面：

arr = [{
   itema: 'a',
   itemb: ['img/image1.jpg', 'img/image2.jpg']
}, {
   itema: 'b',
   itemb: ['img/image3.jpg', 'img/image4.jpg', 'img/image5.jpg']
}, {
   itema: 'c',
   itemb: ['img/image6.jpg', 'img/image7.jpg']
}
]

我已经成功映射了上面的数组，如下所示：

arr.map((arr, i) => {
   return(<span>{arr.itema}</span>)
})

但是我的问题是内部地图。是否可以在给定数组中映射此数组？预先感谢。

Answer 1

是的，当然可以在React或任何其他框架中显示嵌套数组。
例如在您的render函数

中

render() {
 return (
 <>
  {
   arr.map((arr, i) =>(
      <> 
       <span>{arr.itema}</span>
       <span>{arr.itemb.map(item => (<span>{item}</span>))}</span>
      </>
    )
  }
 </>
 )
}

Answer 2

当然可以。

arr.map((item, i) => {
   return (
     <div>
         <span>{item.itema}</span>
         {
            item.itemb && item.itemb.length > 0 &&
            item.itemb.map(image => (<img src={image} />))
         }
     </div>
    );
})

这将如下所示（仅针对arr中的一项）

  <div>
   <span>a</span>
   <img src="img/image1.jpg" />
   <img src="img/image2.jpg" />
  </div>

我注意到您在第一个地图函数中使用了与父数组arr相同的商品名称arr。我建议使用其他键名来正确识别。

数组中的数组中的一个数组中的一个地图

2 个答案: