Question

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

期望的输出：

我的头衔 img 1 img 2

当前输出：

我的头衔此搜索我的头衔 image 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

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

Answer 2

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

使用map返回多维数组中的第一个索引

2 个答案: