React - メディアタイプが写真の場合は写真を表示

Question

jsxでループを使用しようとしています。

私は、Instagram投稿のリストを返すAPIを呼び出しています。これは正常に動作しますが、いくつかの投稿にはビデオと写真がリンクされているため、問題が発生しています。

ポストメディアタイプがvideoの場合は、type === 'video'以外はtype === 'photo'です。私はこの論理を下に書きました。console.log(photo)私は各写真のURLにリンクしていますが、<img src={photo} />は写真をページに表示せず、代わりに}の写真が表示されます。

この問題を解決する方法を教えてもらえますか？さらなる情報が必要な場合はお知らせください。私が知っている限り、マップ機能のphotoは別の範囲にあるためですか？私も失敗したthisを追加しようとしている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> 
    ) 
    } 

。

post.media.map(function(photo, index){ 
    if(photo.type === 'photo') { 
     photo = post.media[index].url; 
     console.log(photo) 
    } 
}, this); 

Answer 1

あなた

<div className='insta-pic'> 

</div> 

内でこの

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

を試してみてくださいあなたは1つの余分}を使用していて、あなたの<img src={photo.url} />は.mapイテレータの外にあります。