我正在使用 fetch
从本地 API 返回一些数据。我能够返回数据并设置状态。但是,在我的 render()
函数中,当使用 map
并尝试访问比数据中的顶级对象更深的任何内容时,我得到一个 undefined
错误。我可以正确地将我想要的任何级别的数据记录到控制台,但我无法在呈现的组件中访问它。
constructor(props) {
super(props);
this.state ={
verifications: []
}
}
componentWillMount(){
fetch('http://localhost:3001/verifications')
.then(response => response.json())
.then((verifications) => {
this.setState({verifications})
console.log(this.state);
});
}
在我的渲染中
{this.state.verifications.map(verification =>
<div key={verification._id}>
<ReviewListItem
hasAvatar={true}
imageUrl={verification.supplier.logo}
title={verification.supplier.companyName}
description={verification.tasks.length}
/>
</div>
)}
这是我得到的错误:
未处理的拒绝 (TypeError):无法读取 null 的属性“logo”
我四处寻找这个问题的答案,但我觉得我一定是在接近这个错误。我来自 Angular 1,我对 React 非常陌生。也许我很难理解这些概念。
这是我的数据:
[
{
"_id": 1000,
"supplier": {
"_id": 1000,
"companyName": "ACME Business Ventures",
"logo": "/images/logos/suppliers/acme.jpg",
"avettaId": "ADS83J",
"brandColor": "#563E5E",
"clients": [],
"locations": [],
"primaryContact": {},
"address": {},
"createdAt": "2017-06-30T17:42:23.479Z"
},
"tasks": [
{
"form": "PQF General",
"question": "How long have you been in business?",
"answer": "18 Years",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "PQF General",
"question": "Have you had any fatalities in the last 3 years?",
"answer": "No",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "Diversity Questionnaire",
"question": "Are you a minority-owned business?",
"answer": "Yes",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "Sustainability Questionnaire",
"question": "What percentage of your business runs on renewable energy?",
"answer": "About 55%, but that's expected to climb to 80% by next year.",
"status": "incomplete",
"attachment": "",
"comments": []
}
]
},
{
"_id": 2000,
"supplier": null,
"tasks": [
{
"form": "PQF General",
"question": "How long have you been in business?",
"answer": "18 Years",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "PQF General",
"question": "Have you had any fatalities in the last 3 years?",
"answer": "No",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "Diversity Questionnaire",
"question": "Are you a minority-owned business?",
"answer": "Yes",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "Sustainability Questionnaire",
"question": "What percentage of your business runs on renewable energy?",
"answer": "About 55%, but that's expected to climb to 80% by next year.",
"status": "incomplete",
"attachment": "",
"comments": []
}
]
},
{
"_id": 3000,
"supplier": null,
"tasks": [
{
"form": "PQF General",
"question": "How long have you been in business?",
"answer": "18 Years",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "PQF General",
"question": "Have you had any fatalities in the last 3 years?",
"answer": "No",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "Diversity Questionnaire",
"question": "Are you a minority-owned business?",
"answer": "Yes",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "Sustainability Questionnaire",
"question": "What percentage of your business runs on renewable energy?",
"answer": "About 55%, but that's expected to climb to 80% by next year.",
"status": "incomplete",
"attachment": "",
"comments": []
}
]
},
{
"_id": 4000,
"supplier": null,
"tasks": [
{
"form": "PQF General",
"question": "How long have you been in business?",
"answer": "18 Years",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "PQF General",
"question": "Have you had any fatalities in the last 3 years?",
"answer": "No",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "Diversity Questionnaire",
"question": "Are you a minority-owned business?",
"answer": "Yes",
"status": "incomplete",
"attachment": "",
"comments": []
},
{
"form": "Sustainability Questionnaire",
"question": "What percentage of your business runs on renewable energy?",
"answer": "About 55%, but that's expected to climb to 80% by next year.",
"status": "incomplete",
"attachment": "",
"comments": []
}
]
}
]
最佳答案
您的 vendor 之一为空(至少一个)。考虑使用像 imageUrl={verification.supplier 这样的东西? verification.supplier.logo : null
而不是 imageUrl={verification.supplier.logo}
。
关于javascript - React - 访问返回数据中的嵌套对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44979092/