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

Question

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

期望的输出:

我的标题 图片 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>
    ) 

Answer 1

将内部 map 移动到 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>
        )
     })