Получите Undefined при попытке получить доступ к массиву, вложенному в Object в ReactJS

Question

Я пытался задать этот вопрос раньше, но до сих пор не могу понять.Я знаю о точечных и скобочных обозначениях, и я пытался использовать пустые ключи, но все еще ничего.В любом случае, у меня есть массив объектов JSON из API, например:

[
  {
    "group": {
      "id": 1,
      "letter": "A",
      "teams": [
        {
          "team": {
            "id": 4,
            "country": "Uruguay",
            "fifa_code": "URU",
            "points": 9,
            "wins": 3,
            "draws": 0,
            "losses": 0,
            "games_played": 3,
            "goals_for": 5,
            "goals_against": 0,
            "goal_differential": 5
          }
        },
        {
          "team": {
            "id": 1,
            "country": "Russia",
            "fifa_code": "RUS",
            "points": 6,
            "wins": 2,
            "draws": 0,
            "losses": 1,
            "games_played": 3,
            "goals_for": 8,
            "goals_against": 4,
            "goal_differential": 4
          }
        },
        {
          "team": {
            "id": 2,
            "country": "Saudi Arabia",
            "fifa_code": "KSA",
            "points": 3,
            "wins": 1,
            "draws": 0,
            "losses": 2,
            "games_played": 3,
            "goals_for": 2,
            "goals_against": 7,
            "goal_differential": -5
          }
        },
        {
          "team": {
            "id": 3,
            "country": "Egypt",
            "fifa_code": "EGY",
            "points": 0,
            "wins": 0,
            "draws": 0,
            "losses": 3,
            "games_played": 3,
            "goals_for": 2,
            "goals_against": 6,
            "goal_differential": -4
          }
        }
      ]
    }
  },
  {
    "group": {
      "id": 2,
      "letter": "B",
      "teams": [
        {
          "team": {
            "id": 6,
            "country": "Spain",
            "fifa_code": "ESP",
            "points": 5,
            "wins": 1,
            "draws": 2,
            "losses": 0,
            "games_played": 3,
            "goals_for": 6,
            "goals_against": 5,
            "goal_differential": 1
          }
        },
        {
          "team": {
            "id": 5,
            "country": "Portugal",
            "fifa_code": "POR",
            "points": 5,
            "wins": 1,
            "draws": 2,
            "losses": 0,
            "games_played": 3,
            "goals_for": 5,
            "goals_against": 4,
            "goal_differential": 1
          }
        },
        {
          "team": {
            "id": 8,
            "country": "Iran",
            "fifa_code": "IRN",
            "points": 4,
            "wins": 1,
            "draws": 1,
            "losses": 1,
            "games_played": 3,
            "goals_for": 2,
            "goals_against": 2,
            "goal_differential": 0
          }
        },
        {
          "team": {
            "id": 7,
            "country": "Morocco",
            "fifa_code": "MAR",
            "points": 1,
            "wins": 0,
            "draws": 1,
            "losses": 2,
            "games_played": 3,
            "goals_for": 2,
            "goals_against": 4,
            "goal_differential": -2
          }
        }
      ]
    }
  }
]

Итак, я установил состояние для включения массива объектов, например:

componentDidMount(){
    fetch(`url`)
    .then(data => data.json())
    .then(data=> {
      this.setState({
        groups: data
      })
    })
  }

Теперьконечная цель - передать состояние в качестве реквизита для презентационного компонента, но я не могу даже console.log идентифицировать, буквы или команды групп в массиве, не говоря уже о его использовании в качестве реквизита.

Чтобы получить идентификатор группы, я попробовал вот что:

console.log(this.state.groups[0].group)

И я получаю ошибку: TypeError: Невозможно прочитать свойство 'group' из неопределенного

Я действительно не понимаю, почему, и та же ошибка появляется, если я пытаюсь использовать скобки.

Когда я пытаюсь:

console.log(this.state.groups[0])

Я получаю правильный групповой объект, но я не могу console.log ничего глубже этого.

Кроме того, я имеюпопытался установить состояние, включающее две разные группы, такие как:

componentDidMount(){
    fetch(`url`)
    .then(data => data.json())
    .then(data=> {
      this.setState({
        group1: data[0].group,
        group2: data[1].group
      })
    })
  }

И это прекрасно работает, но тогда я не могу получить доступ к массиву groups, поэтому проблема остается.

Любая помощь будет принята с благодарностью !!!

Answer 1

Итак, проблема заключалась в том, что группы становились неопределенными из-за асинхронного характера, что имело смысл (@ Jayce444 тоже сказал это).Все, что мне нужно сделать, чтобы остановить это, это сделать состояние по умолчанию = null, которое определено:

https://www.ajaymatharu.com/javascript-difference-between-undefined-and-null/

, так что это исправит:

this.state {
groups: null
} 

Answer 2

Выбор групп асинхронный, поэтому при первом монтировании компонента groups не будет определен в состоянии.Или даже если изначально вы установите пустой массив, это все равно означает, что groups[0] не будет определено.Перед записью / рендерингом чего-либо из this.state.groups вы должны проверить, определено ли оно и есть ли у него данные.