はES6

Question

と反応して、私はMichael's tutorialに触発反応フィードアプリを、（a videoもあります）作ってるんだと私はLodash's _.map関数を使用して、小道具として配列内の配列を渡すしようとしているいくつかの問題に遭遇しました。これは私がマッピングだ情報である：

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' 
         } 
        ] 

       } 


      ]; 

私は（これは動作します）このようにコンポーネントに渡している：

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

これは、それぞれの「イベント」オブジェクト

を分割し、完全に正常に動作しますこのような各イベントの対象：

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

：

は、その後、私はdestructureと「アーティスト」をマップしよう0

これは近い私が取得していた結果、ですが、私は必要はありません何：

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

のように...

を：

は、私が取得するために、これらのさらなるを分離する必要があります

ここにパターンがありますが、それをさらに実装する方法はわかりません。それは、同じdestructure、そして_.mapのものを繰り返そうとすると壊れます。誰も私にこれを手にしてください、長いポストのために申し訳ありません。

Answer 1

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

Answer 2

ああ、私は（彼は彼のコメントを削除）VyvITさんのコメントに問題のおかげで見つけ、それはここにある：

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

『アーティスト』は、このようにする必要があり、（中括弧）の非構造べきではありません：

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

ありがとうございます！