Reagieren - Foto zeigen, wenn Medientyp ein Foto ist

Question

Ich versuche eine Schleife in jsx zu verwenden, die funktioniert.

Ich mache einen Aufruf an eine API, die eine Liste von Instagram-Posts zurückgibt. Das funktioniert gut, aber in einigen Posts sind sowohl Videos als auch Fotos mit ihnen verknüpft, was das Problem verursacht.

Wenn der Post-Medientyp ein video ist, dann type === 'video', sonst ist es type === 'photo'. Ich habe diese Logik unten geschrieben, und wenn ich console.log(photo) bekomme ich einen Link auf die URL von jedem Foto, aber <img src={photo} /> zeigt nicht das Foto auf der Seite, sondern zeigt }, wo das Foto sein sollte.

Kann mir jemand raten, wie ich dieses Problem beheben kann? Lassen Sie mich wissen, wenn weitere Informationen benötigt werden. Soweit mir bekannt ist, ist es, weil photo in der Kartenfunktion in einem anderen Bereich ist?

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

In einem Versuch, photo außerhalb der map Funktion für den Zugriff auf die ich versucht habe this hinzufügen, die ebenfalls nicht erfolgreich war.

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

Answer 1

dieses Versuchen

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

in Ihrem

<div className='insta-pic'> 

</div> 

Sie sind ein extra } und Ihre <img src={photo.url} /> verwendet, ist aus dem .map Iterator.