反应 - 如果媒体类型是照片，则显示照片

Question

我正在尝试在jsx中使用一个正在运行的循环。

我正在调用一个返回Instagram帖子列表的API。这样可以正常工作，但有些帖子会同时关联视频和照片，这会导致问题。

如果发布媒体类型为video，则type === 'video'则为type === 'photo'。我在下面写了这个逻辑，当我console.log(photo)我得到每张照片的网址链接时，<img src={photo} />没有在页面上显示照片，而是显示{{ 1}}照片应该在哪里。

有人可以告诉我如何解决这个问题吗？如果需要任何进一步的信息，请告诉我。据我所知，这是因为map函数中的}在不同的范围内？

photo

尝试访问render: function() { var photo; var instagramPostList = this.props.posts.map(function(post, index){ return( <li key={index} className='card'> <div className='insta-pic'> { post.media.map(function(photo, index){ if(photo.type === 'photo') { photo = post.media[index].url; console.log(photo); } }) } <img src={photo} /> } </div> </li> ) }) return ( <div> <ul>{instagramPostList}</ul> </div> ) } 函数之外的photo我尝试添加map，但这也失败了。

this

Answer 1

试试这个

{
  post.media.map(function(photo, index){
    return photo.type === 'photo' && (<img src={photo.url} />)
  })
}

在你的

里面

<div className='insta-pic'>  

</div>

您正在使用一个额外的}，而您的<img src={photo.url} />不在.map迭代器中。