Mapping ein Array innerhalb eines Objekts in Reagieren mit ES6

Question

Ich mache eine Reagieren-Feed App, inspiriert von Michael's tutorial (es gibt auch a video) und ich stieß einige Probleme beim Versuch, ein Array innerhalb eines Arrays als Requisiten mit Lodash's _.map Funktion übergeben. Dies sind die Informationen Ich bin Mapping:

const events = [ 
       { 
        event: 'Gods', 
        venue: 'Asgard', 
        venuePicture: 'picture1.jpg', 
        when: '21:00 27/04/16', 
        genres: ['rock', 'funk'], 
        artists: [ 
         { 
          artist: 'Thor', 
          artistPicture: 'thor.jpg' 
         }, 

         { 
          artist: 'Loki', 
          artistPicture: 'loki.jpg' 
         } 
        ] 

       }, 

       { 
        event: 'Humans', 
        venue: 'Midgard', 
        venuePicture: 'picture2.jpg', 
        when: '21:00 27/04/16', 
        genres: ['jazz', 'pop'], 
        artists: [ 
         { 
          artist: 'Human1', 
          artistPicture: 'human1.jpg' 
         }, 

         { 
          artist: 'Human2', 
          artistPicture: 'human2.jpg' 
         } 
        ] 

       } 


      ]; 

Ich bin auf die Komponente wie dies vorbei (das funktioniert):

renderItems(){ 
     const props = _.omit(this.props, 'events'); 

     return _.map(this.props.events, (event, index) => <EventsFeedItem key={index} {...event} {...props}/>); 

    } 

    render() { 
      return (
       <section> 
        {this.renderItems()} 
       </section> 
      ); 
     } 

Das funktioniert völlig in Ordnung, jedes „Ereignis“ Dividieren Objekt

Dann versuche ich denaturiert, und ordnen Sie die „Künstler:“ Ziel eines jeden Ereignisses wie folgt aus:

renderArtists() { 

     const { event, venue, venuePicture, when, genres, artists } = this.props.events; 

     const props = _.omit(this.props, 'events'); 
     return _.map({artists}, (artist, index) => <ItemArtist key={index} {...artist} {...props}/>); 

    } 

    render() { 
     return (
      <ul> 
       {this.renderArtists()} 
      </ul> 
     ); 
    } 

Dies ist das Ergebnis erhalte ich, die in der Nähe ist, aber nicht das, was ich brauche:

Ich brauche diese weiter zu trennen zu bekommen:

{artist: "Thor"} {artistPicture: "thor.jpg"} 
{artist: "Loki"} {artistPicture: "loki.jpg"} 

und so weiter ...

Ich sehe, es gibt ein Muster hier, ich weiß nur nicht, wie es weiter zu implementieren. Es bricht, wenn ich versuche, die gleiche Destruktur dann _.map Sache zu wiederholen. Kann mir bitte jemand helfen, Entschuldigung für die lange Post.

Answer 1

return _(this.props.events).flatMap('artists').map((artist, index)=><ItemArtist key={index} {...artist} {...props}/>).value(); 

Answer 2

Oh, ich das Problem dank VyvIT ‚s Kommentar gefunden (er gelöscht seinen Kommentar), ist es hier:

const { event, venue, venuePicture, when, genres, artists } = this.props.events; 
    _.map({artists}, (artist, index) => <ItemArtist key={index} {...artist} {...props}/>); 

‚Künstler‘nicht destrukturierten (geschweifte Klammern) wird, sollte so sein, :

_.map(artists, (artist, index) => <ItemArtist key={index} {...artist} {...props}/>); 

Vielen Dank Jungs!