最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - React - Accessing nested objects in returned data - Stack Overflow

programmeradmin7浏览0评论

I'm using fetch to return some data from a local API. I'm able to return the data and set the state. However, in my render() function when using map and attempting to access anything deeper than the top level object in the data I get an undefined error. I can correctly log any level of the data that I want to the console, but I don't have access to it within the rendered ponent.

constructor(props) {
  super(props);
  this.state ={
    verifications: []
  }
}

ponentWillMount(){
  fetch('http://localhost:3001/verifications')
    .then(response => response.json())
    .then((verifications) => {
      this.setState({verifications})
      console.log(this.state);
    });
}

and in my render

{this.state.verifications.map(verification =>
  <div key={verification._id}>
    <ReviewListItem
      hasAvatar={true}
      imageUrl={verification.supplier.logo}
      title={verification.supplierpanyName}
      description={verification.tasks.length}
    />
  </div>
)}

This is the error I get: Unhandled Rejection (TypeError): Cannot read property 'logo' of null

I've searched high and low for an answer to this, but I feel like I must be approaching this wrong. I e from Angular 1, and I'm extremely new to React. Maybe I'm having a hard time grasping the concepts.

Here's my data:

[
{
"_id": 1000,
"supplier": {
"_id": 1000,
"panyName": "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": "inplete",
"attachment": "",
"ments": []
},
{
"form": "PQF General",
"question": "Have you had any fatalities in the last 3 years?",
"answer": "No",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"form": "Diversity Questionnaire",
"question": "Are you a minority-owned business?",
"answer": "Yes",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"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": "inplete",
"attachment": "",
"ments": []
}
]
},
{
"_id": 2000,
"supplier": null,
"tasks": [
{
"form": "PQF General",
"question": "How long have you been in business?",
"answer": "18 Years",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"form": "PQF General",
"question": "Have you had any fatalities in the last 3 years?",
"answer": "No",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"form": "Diversity Questionnaire",
"question": "Are you a minority-owned business?",
"answer": "Yes",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"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": "inplete",
"attachment": "",
"ments": []
}
]
},
{
"_id": 3000,
"supplier": null,
"tasks": [
{
"form": "PQF General",
"question": "How long have you been in business?",
"answer": "18 Years",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"form": "PQF General",
"question": "Have you had any fatalities in the last 3 years?",
"answer": "No",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"form": "Diversity Questionnaire",
"question": "Are you a minority-owned business?",
"answer": "Yes",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"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": "inplete",
"attachment": "",
"ments": []
}
]
},
{
"_id": 4000,
"supplier": null,
"tasks": [
{
"form": "PQF General",
"question": "How long have you been in business?",
"answer": "18 Years",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"form": "PQF General",
"question": "Have you had any fatalities in the last 3 years?",
"answer": "No",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"form": "Diversity Questionnaire",
"question": "Are you a minority-owned business?",
"answer": "Yes",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"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": "inplete",
"attachment": "",
"ments": []
}
]
}
]

I'm using fetch to return some data from a local API. I'm able to return the data and set the state. However, in my render() function when using map and attempting to access anything deeper than the top level object in the data I get an undefined error. I can correctly log any level of the data that I want to the console, but I don't have access to it within the rendered ponent.

constructor(props) {
  super(props);
  this.state ={
    verifications: []
  }
}

ponentWillMount(){
  fetch('http://localhost:3001/verifications')
    .then(response => response.json())
    .then((verifications) => {
      this.setState({verifications})
      console.log(this.state);
    });
}

and in my render

{this.state.verifications.map(verification =>
  <div key={verification._id}>
    <ReviewListItem
      hasAvatar={true}
      imageUrl={verification.supplier.logo}
      title={verification.supplier.panyName}
      description={verification.tasks.length}
    />
  </div>
)}

This is the error I get: Unhandled Rejection (TypeError): Cannot read property 'logo' of null

I've searched high and low for an answer to this, but I feel like I must be approaching this wrong. I e from Angular 1, and I'm extremely new to React. Maybe I'm having a hard time grasping the concepts.

Here's my data:

[
{
"_id": 1000,
"supplier": {
"_id": 1000,
"panyName": "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": "inplete",
"attachment": "",
"ments": []
},
{
"form": "PQF General",
"question": "Have you had any fatalities in the last 3 years?",
"answer": "No",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"form": "Diversity Questionnaire",
"question": "Are you a minority-owned business?",
"answer": "Yes",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"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": "inplete",
"attachment": "",
"ments": []
}
]
},
{
"_id": 2000,
"supplier": null,
"tasks": [
{
"form": "PQF General",
"question": "How long have you been in business?",
"answer": "18 Years",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"form": "PQF General",
"question": "Have you had any fatalities in the last 3 years?",
"answer": "No",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"form": "Diversity Questionnaire",
"question": "Are you a minority-owned business?",
"answer": "Yes",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"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": "inplete",
"attachment": "",
"ments": []
}
]
},
{
"_id": 3000,
"supplier": null,
"tasks": [
{
"form": "PQF General",
"question": "How long have you been in business?",
"answer": "18 Years",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"form": "PQF General",
"question": "Have you had any fatalities in the last 3 years?",
"answer": "No",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"form": "Diversity Questionnaire",
"question": "Are you a minority-owned business?",
"answer": "Yes",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"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": "inplete",
"attachment": "",
"ments": []
}
]
},
{
"_id": 4000,
"supplier": null,
"tasks": [
{
"form": "PQF General",
"question": "How long have you been in business?",
"answer": "18 Years",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"form": "PQF General",
"question": "Have you had any fatalities in the last 3 years?",
"answer": "No",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"form": "Diversity Questionnaire",
"question": "Are you a minority-owned business?",
"answer": "Yes",
"status": "inplete",
"attachment": "",
"ments": []
},
{
"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": "inplete",
"attachment": "",
"ments": []
}
]
}
]
Share Improve this question edited Jul 7, 2017 at 20:31 daveyholler asked Jul 7, 2017 at 20:25 daveyhollerdaveyholler 1411 gold badge2 silver badges10 bronze badges 2
  • verification.supplier is a number, not an object. it doesnt look like those fields you are trying to access exist anywhere in the data – pizzarob Commented Jul 7, 2017 at 20:28
  • Ah crap... whoops. Posted my seed file. Edited to show the actual data. – daveyholler Commented Jul 7, 2017 at 20:32
Add a ment  | 

3 Answers 3

Reset to default 5

One of your suppliers is null (at least one). Consider using something like imageUrl={verification.supplier ? verification.supplier.logo : null} instead of imageUrl={verification.supplier.logo}.

The second index of your array has supplier: null. You can check that supplier exists first

{this.state.verifications.map(verification =>
  <div key={verification._id}>
    <ReviewListItem
      hasAvatar={true}
      imageUrl={verification.supplier && verification.supplier.logo}
      title={verification.supplier && verification.supplier.panyName}
      description={verification.tasks.length}
    />
  </div>
)}

The supplier is clearly null in your json snippet:

"supplier": null,

Thus it obviously fails :)

I believe angular automatically checks for nulls in expressions like this: foo.bar.baz.something.deeply.nested — so if anything is null the result will be null — in react, (and in js in general)‚ you need to check for nulls by yourself.

发布评论

评论列表(0)

  1. 暂无评论