Mapping innerhalb des Mappings

Question

Ich habe eine gefälschte Nutzlastdaten für meine App erstellt und ich teste die Nutzlast mit der Funktion map(). Obwohl ich nach der Zuordnung einiger Daten die korrekte Anzahl von divs zurückgeben kann, kann ich keine korrekte Konfiguration für die Rückgabe einer Payload-ID finden. Was mache ich falsch?

Datenbank sieht wie folgt aus:

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

meine Komponente reagieren, wo ich die Zufalls Nutzlast machen sieht wie folgt aus (alle richtigen Daten aus der Mutter bestanden):

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 

In dieser Konfiguration mein Rückkehr sieht aus wie das zum Beispiel:

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

Answer 1

Versuchen:

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