在React Js中使用映射访问嵌套json

我正试图从API的获取数据中准备位置属性/对象。我成功地读取了单个值，但如果我尝试对嵌套值执行相同的操作，则会出现未定义的错误

{
"_id" : ObjectId("5ea5094d5e087f2afc01ebe1"),
"Title" : "Developer",
"Summary" : "DeveloperDeveloperDeveloper",
"JobDetails" : {
    "JobType" : [ 
        "fullTime"
    ],
    "StartDate" : ISODate("2020-05-01T04:05:54.000Z"),
    "EndDate" : ISODate("2020-05-14T14:00:00.000Z"),
    "Salary" : {
        "From" : 65000,
        "To" : 75000
    },
    "Location" : {
        "Country" : "Australia",
        "City" : "Sydney"
    }
}
}


let showJobs = jobs.map(
        j => (
            <div className='row'>
                //I tried j.jobDetails.location.country

                            {j.jobDetails.map(s =>
                                <span>
                                    {s.location.country}
                                </span>)
                            }
            </div>
        )

{
“_id”：ObjectId（“5ea5094d5e087f2afc01ebe1”），
“标题”：“开发商”，
“摘要”：“DeveloperDeveloperDeveloper”，
“工作详情”：{
“作业类型”：[
“全职”
],
“起始日期”：ISODate（“2020-05-01T04:05:54.000Z”），
“结束日期”：ISODate（“2020-05-14T14:00:00.000Z”），
“薪金”：{
“从”：65000，
“至”：75000
},
“地点”：{
“国家”：“澳大利亚”，
“城市”：“悉尼”
}
}
}
让showJobs=jobs.map(
j=>(
//我试过j.jobDetails.location.country
{j.jobDetails.map（s=>
{s.location.country}
)
}
)

您的对象属性与JSON的实际形状不匹配。大多数道具都是标题大小写的。因此如下所示：

{j.JobDetails.map(s =>
  <span>
    {s.Location.Country}
  </span>)
}

{j.JobDetails.map（s=>
{s.Location.Country}
)
}

---

将来，您可以通过使用控制台.log或调试器断点来解决此类问题。

jobDetails

不是一个数组而是一个对象。因此，您可以直接访问它的属性，因为每个属性都有一个唯一的名称。还可以查看大小写敏感度

{j.JobDetails.Location.Country}

您的数据类型是Object，您可以在此代码中映射数据类型数组，而数组中的数据是string类型

data.JobDetails.JobType.map（（el，idx）=>
{el}
)

如果您想访问数据位置，可以使用此选项

{data.JobDetails.Location.Country}

---

{data.JobDetails.Location.City}

考虑到API返回的结果将是对象数组，您可以迭代该数组，然后对于每个对象，您可以直接访问

JobDetails

，而不必

映射它，因为
JobDetails
是对象而不是数组

所以你可以

jobs.map((job, index) => {
    console.log(job.JobDetails.Location.Country); // this will print country name
})

使用JSFIDLE链接
我尝试了这个，它给了我错误Uncaught TypeError:无法读取控制器中未定义的属性'Location'，我返回的json如下：x.Id，x.Title，x.Summary，x.JobDetails.Location，x.ExpiryDate，x。Status@RahulWaghmare你能做
console.log（作业）吗
在
作业之前。映射
并更新您的问题？您发布的输入数据似乎与实际数据不符。数据与我选中的@auskenfuchs Fetched jobs[object object]，[object object]，[object object object]，[object object object]相同什么错误消息？您可以在返回组件外部使用console.log。数据是示例名称，因为我不知道您的数据。