マッピング内でのマッピング

Question

私は自分のアプリケーション用の偽のペイロードデータを作成しました。そして、map（）関数を使ってペイロードをテストしています。しかし、いくつかのデータを正しくマッピングした後に正しい数のdivを返すことはできますが、ペイロードIDを返すための適切な設定は見つけられません。私は間違って何をしていますか？

データベースは、次のようになります。この構成では

import React from 'react'; 

class WherepothecaryPanel extends React.Component{ 
render(){ 

    const fakePayload = this.props.fakePayload; 

    const rngPayloadId = Math.floor(Math.random()*4); 


    console.log('Random payload id', rngPayloadId) 


    const payload = fakePayload.map(payload =>{ 
     if(payload.payloadId === rngPayloadId){ 
      return payload.drugsId.map(drug => { 
       return <div> Drug ID: {drug.drugsId}, lat: {payload.lat}, lon: {payload.lon} </div> 
      }) 
     } 
    }) 

    return(
     <div> 
      <div id='wherepothecaryPanel' className='col-xs-8'> 
       {payload} 
      </div> 
     </div> 
    ) 
} 
} 

export default WherepothecaryPanel 

私：

export default [ 
{ 
    payloadId: 0, 
    drugsId:[0, 29], 
    lat: 51.760549449821696, 
    lon: 19.403501300000016 
}, 
{ 
    payloadId: 1, 
    drugsId:[3], 
    lat: 52.760549449821696, 
    lon: 17.403501300000016 
}, 
{ 
    payloadId: 2, 
    drugsId:[5, 19, 14, 31], 
    lat: 53.760549449821696, 
    lon: 29.403501300000016 
}, 
{ 
    payloadId: 3, 
    drugsId:[3, 9], 
    lat: 53.760549449821696, 
    lon: 16.403501300000016 
} 
] 

私は、私は、ランダムなペイロードは、この（すべて正しいデータが親から渡された）ように見えるレンダリングコンポーネントを反応させます戻り値は次のとおりです。

Drug ID: , lat: 51.760549449821696, lon: 19.403501300000016 
Drug ID: , lat: 51.760549449821696, lon: 19.403501300000016 

Answer 1

試してみてください：

const payload = fakePayload.map(payload =>{ 
    if(payload.payloadId === rngPayloadId){ 
     // you are mapping through ids, so just have to use as value {id} 
     return payload.drugsId.map(id => { 
      return <div> Drug ID: {id}, lat: {payload.lat}, lon: {payload.lon} </div> 
     }) 
    } 
})