Javascript 尝试访问ReactJS中嵌套在对象中的数组时未定义

我以前试过问这个问题，但我还是不明白。我知道点和括号表示法，我也尝试过使用空键，但仍然一无所获。总之，我有一个来自API的JSON对象数组，例如：

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

现在，最终目标是将状态作为道具传递给表示组件，但我甚至无法在数组中记录组的id、字母或团队，更不用说将其作为道具使用了

为了获取组的id，我尝试了以下方法：

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

我得到了一个错误： TypeError:无法读取未定义的属性“组”

我真的不明白为什么，如果我尝试用括号表示法，同样的错误也会出现

当我尝试时：

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

这很好，但是我无法访问对象的teams数组，所以问题仍然存在

---

任何帮助都将不胜感激

获取组是异步的，因此当您的组件第一次装载时，

组

不会在状态中定义。或者，即使最初将其设置为空数组，这仍然意味着不会定义

组[0]

。在记录/呈现

this.state.groups

中的任何内容之前，您必须检查它是否已定义，以及它是否具有数据。

因此，问题是，由于异步性质，组变得不定义，这是有意义的（@Jayce444也这么说）。我所要做的就是将默认状态设为null，其定义如下：

因此，这将解决它：

this.state {
groups: null
} 

---

对，第一个console.log将返回未定义，但在设置状态后，如果我尝试访问组对象，console.log仍然返回未定义。我知道这是第二个console.log，因为console.log（this.state.groups[0]）将作为组对象返回，而不是未定义。