数组中的映射内的映射，数组内的映射答案

【问题标题】：A map within a map from an array, within an array数组中的映射内的映射，数组内的映射
【发布时间】：2020-01-31 09:34:59
【问题描述】：

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>)
})

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

【问题讨论】：

标签： arrays reactjs ecmascript-6 array-map

【解决方案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>

我注意到您在第一个 map 函数中使用了相同的项目名称 arr 作为父数组 arr。我建议使用不同的键名来正确识别。

【讨论】：

还有一个问题。我是 Reactjs 的新手，现在基本上知道一两件事。在您的代码中，这是什么意思——“item.itemb && arr.itemb.length > 0 &&”。谢谢。
@DaveMoreno 哎呀！这是一个错字。我更新了我的答案。谢谢。
好的，但是如果我要将它用于将来的参考，这意味着什么？真的很感激。谢谢。
@DaveMoreno 这是一种验证，在我的代码中，它仅在图像数组具有像您的示例数据这样的有效值时才呈现图像数组。当没有itemb 或itemb 中没有项目时，不需要渲染它们。 :D 如果我没有验证itemb，那么在调用item.itemb.map() 函数时会出现错误。建议在渲染前进行验证。
谢谢。很好的帮助。

【解决方案2】：

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

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

【讨论】：

这非常有用。但是，在我删除了一个图像数组后，像这样将其变为空白--item：['']，它会产生错误。但如果没有，您的代码将完美运行。谢谢。