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

Question

我曾经尝试过问这个问题，但是我仍然无法弄清楚。 我知道点和方括号的表示法，并且我尝试使用空键，但仍然一无所获。 无论如何，我有一个来自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
      })
    })
  }

现在，最终目标是将状态作为道具传递给演示组件，但我什至无法console.log数组中组的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对象数组，因此问题仍然存在。

任何帮助将不胜感激！！！

Answer 1

获取组是异步的，因此在组件首次装入groups时，不会在状态中定义groups 。 甚至即使您最初将其设置为空数组，这仍意味着将不会定义groups[0] 。 在记录/呈现this.state.groups任何内容之前，您必须检查它是否已定义以及是否具有数据。

Answer 2

因此，问题是由于异步的性质，组变得不确定，这是有道理的（@ Jayce444也这样说）。 我要做的就是阻止默认状态= null的定义：

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

所以这将解决它：

this.state {
groups: null
}