TypeError: невозможно прочитать свойство 'url' неопределенной страницы реакции в объекте JSON

Question

Я использую strapi с реакцией. Приношу объект JSON (дом). Если я сделаю console.log(home), я получу:

{
  "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"
   }
}

Если я console.log(home.Hero) я получу соответствующее:

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

Однако, если я развернусь и попытаюсь получить только URL console.log(home.Hero.url) Я получаю эту ошибку:

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

Что мне здесь не хватает?

Код извлечения «действия»:

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)))     
}}

И JSON.stringify(home.Hero) дает тот же результат в строковой форме

Answer 1

Вот что происходит.

Вероятно, это связано с тем, что на момент чтения URL-адреса из Hero Hero еще не определен (как следует из сообщения об ошибке). Вы можете решить эту проблему, сначала подтвердив, что Hero определен, прежде чем читать url. Примерно так: console.log (home.Hero && home.Hero.url).

Хотя это приводит к большому количеству громоздкого кода, и поэтому (imo) было бы лучше использовать https://www.npmjs.com/package/immutable для управления данными, возвращаемыми из API Strapi.

Затем вы должны установить home как неизменяемый объект (карту) и прочитать URL-адрес, подобный этому: console.log (home.getIn ( ['Hero', 'url']). Если Hero здесь не определен, ваше приложение не будет сканировать sh, а вместо этого будет возвращено false. - Боаз Пулман - slack.strapi