映射内部映射

Question

我为我的应用程序创建了一个假的有效载荷数据，我正在测试带map()函数的有效载荷。然而，虽然我可以在映射一些数据后返回正确的div数，但我无法找到返回有效负载ID的适当配置。我做错了什么？

数据库如下所示：

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

我的react组件呈现的随机有效载荷如下所示(所有正确的数据都是从父级传递的)：

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

在这个配置中，我的返回如下所示：

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