我正在尝试从API的提取数据中准备位置属性/对象。我可以读取单个值，但是如果对嵌套使用相同的值，则会出现错误Undefined。
{
"_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>
)
答案 0 :(得分：0)
您的对象属性与JSON的实际形状不匹配。大多数道具都带有标题。这样的事情如下：
{j.JobDetails.map(s =>
<span>
{s.Location.Country}
</span>)
}
以后，您可以使用console.log或调试器断点来解决此类问题。
答案 1 :(得分：0)
@media (min-width: 1025px) {
main {
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"header header header header"
"article article article aside"
"section section section aside"
"footer footer footer footer"
;
}
aside #outer {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"item1 item2"
"item3 item4"
"item5 item6"
;
grid-gap: 15px 0px;
}
section #section {
padding: 15px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"section1 section2"
"section3 section4"
;
grid-gap: 15px 15px;
}
}
@media (min-width: 401px) and (max-width: 1024px) {
aside #outer {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"item1 item2 item3 item4"
"item5 item6"
;
grid-gap: 15px 15px;
margin: 15px;
;
}
main {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: auto;
grid-template-areas:
"header"
"article"
"section"
"aside"
"footer"
;
grid-gap: 10px;
}
section #section {
padding: 15px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"section1 section2"
"section3 section4"
;
grid-gap: 15px 15px;
}
}
@media (max-width: 400px) {
main {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-areas:
"header"
"article"
"section"
"aside"
"footer"
;
grid-gap: 10px;
}
section #section {
padding: 15px;
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"section1"
"section2"
"section3"
"section4"
;
grid-gap: 15px 15px;
}
aside #outer {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"item1 item2"
"item3 item4"
"item5 item6"
;
grid-gap: 15px 15px;
margin: 15px;
;
}
}
不是数组而是对象。因此，您可以直接访问它的属性，因为每个属性都有一个唯一的名称。还要注意区分大小写。
jobDetails答案 2 :(得分：0)
您的数据类型是Object，您可以在此代码中映射数据类型数组，而您的数组中的数据是字符串类型。
data.JobDetails.JobType.map((el, idx) =>
<span key={idx}>{ el }</span>
)
如果要访问数据位置，则可以这样做。
<span>{ data.JobDetails.Location.Country }</span>
<span>{ data.JobDetails.Location.City }</span>
答案 3 :(得分：0)
考虑到从API返回的结果将是对象数组，您可以迭代该数组，然后对于每个对象都可以直接访问JobDetails，而不必map JobDetails是对象，而不是数组。
所以你可以做
jobs.map((job, index) => {
console.log(job.JobDetails.Location.Country); // this will print country name
})
有效的jsfiddle链接https://jsfiddle.net/aztu8of3/