TypeError：无法读取 JSON object 中未定义反应带的属性“url”

Question

I'm using strapi with react. I'm fetching a JSON object (home). If I do console.log(home) I get:

{
  "id": 6,
  "created_at": "2020-06-21T07:07:36.000Z",
  "updated_at": "2020-06-21T07:18:40.000Z",
  "HomeTextTop": "Home text here.",
  "HomeTitle": "Home title here",
  "Hero": {
    "id": 3,
    "name": "facade_pastel_summer_123664_800x600",
    "alternativeText": "",
    "caption": "",
    "width": 800,
    "height": 600,
    "url": "http://someurlhere.com"
   }
}

If I console.log(home.Hero) I get the appropriate:

{
   "id": 3,
   "name": "facade_pastel_summer_123664_800x600",
   "alternativeText": "",
   "caption": "",
   "width": 800,
   "height": 600,
   "url": "http://someurlhere.com"
  }

However, if I drill down and try and get just the URL console.log(home.Hero.url) I get this error:

TypeError: Cannot read property 'url' of undefined react strapi in JSON object

What am I missing here?

The 'action' fetching code is:

export const fetchHome = () => {     
     return dispatch => {         
     dispatch(fetchHomeBegin())         
     return fetch(`${strapiUrl}/home`, {             
     method: 'get',             
     mode: 'cors',             
     headers: { 'Content-Type': 'application/json' }         
})             
.then(res => res.json())             
.then(json => {                 
console.log(json)                 
dispatch(fetchHomeSuccess(json))                 
})             
.catch(error => dispatch(fetchHomeFail(error)))     
}}

And JSON.stringify(home.Hero) gives the same result in string form

Answer 1

Here's what's happening.

This is likely because at the moment of reading url from Hero, Hero is not yet defined (as the error message suggests). You could tackle this by first confirming Hero is defined before reading url. Something like this: console.log(home.Hero && home.Hero.url).

Though this leads to a lot of cumbersome code, and therefor (imo) it would be better to use https://www.npmjs.com/package/immutable to manage the data that is returned from the Strapi api.

You would then set home as an immutable object (a Map) and read url like this: console.log(home.getIn(['Hero', 'url']). If Hero is undefined here your application will not crash, but instead false will be returned. - Boaz Poolman - slack.strapi