使用 .map() 对数组进行问题映射答案

【问题标题】：Issue mapping over array with .map()使用 .map() 对数组进行问题映射
【发布时间】：2018-09-21 19:01:44
【问题描述】：

我有一个反应组件，它映射到渲染函数中的一组电影，并注销每个电影的图像。我无法将每个图像本身映射到<img /> 标签。目前看来，所有图像都被吐出到一个<img /> 标签中，那么如何循环浏览图像并将每张图像插入到自己的图像标签中？

render () {
const movies = this.state.movies.map((movie, i) => {
  console.log("Image url: ", movie.images.boxArt)
})


return (
  <div className='welcome'>
    <div className='container'>
      <div className='movies'>
        { this.state.loading &&
          <Loader size='10' />
        }

        { !this.state.loading &&
          <div className='movie'>
            <img src={ movies } /> <===SHOULD END UP BEING A ROW OF MOVIE POSTERS
          </div>
        }
      </div>
    </div>
  </div>
 )
 }
}

【问题讨论】：

标签： reactjs array.prototype.map

【解决方案1】：

为每个数组元素渲染一个图像并指定 src。像这样：

const movies = this.state.movies.map((movie, i) => <img key={i} src={ movie } />)

<div className='movie'>
    { movies }
</div>

【讨论】：