数组中的地图中的地图，数组中的地图

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

当然可以。

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。我建议使用不同的键名来正确识别。

Answer 2

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

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

数组中的地图中的地图，数组中的地图

A map within a map from an array, within an array

arrays

array-map

ecmascript-6

reactjs