使用映射返回多维数组中的第一个索引答案

【问题标题】：Return first index in multidimensional array using map使用映射返回多维数组中的第一个索引
【发布时间】：2017-06-27 09:31:50
【问题描述】：

我有以下场景，我需要遍历数据集并返回多个帖子。每个帖子都有一个标题和一些附加的图像。我能够遍历所有数据，但它多次返回相同的标题，而不是一次。

期望的输出：

我的头衔图像 1 图片2

电流输出：

我的头衔图像1 我的标题图 2

JS：

const mappedFlickr = this.state.articles.map((flickr, i) => { 
        return ( 
          flickr.fields.featuredImage.map((st, i) => { 
             return ( 
                <div>
                <span>{flickr.fields.title}</span>
                <img src={st.fields.file.url +'?w=300&h=300'} />
                </div>
              )
          })
        )
     })

return (
      <section>
         { mappedFlickr }
      </section>
    )

【问题讨论】：

是的，flickr.fields.title 将是相同的标题，无论您在循环中有什么图像。为什么不将<span> 移出featuredImage.map，就在<section> 中？

标签： javascript arrays loops multidimensional-array

【解决方案1】：

将内部地图移入div

const mappedFlickr = this.state.articles.map((flickr, i) => { 
        return ( 
           <div key={i}>
              <span>{flickr.fields.title}</span>
              {
               flickr.fields.featuredImage.map((st, j) => 
                 (<img key={j} src={st.fields.file.url +'?w=300&h=300'} />)
               )
              }

            </div>
        )
     })

【讨论】：

【解决方案2】：

尝试将<span>{flickr.fields.title}</span> 移到内部循环之外

【讨论】：