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：无法读取未定义的属性“ group”

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

当我尝试：

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

我得到了正确的组对象，但是我无法进行控制台操作。

此外，我尝试将状态设置为包括两个不同的组，例如：

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

那很好，但是后来我无法访问teams对象数组，因此问题仍然存在。

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

Answer 1

获取组是异步的，因此在组件首次挂载BEGIN DECLARE CheckDate INT; SELECT count(id) INTO CheckDate FROM test.schedule WHERE 'schedule_start_time' BETWEEN ( SELECT start_time FROM test.schedule WHERE bus = busid AND DATE (start_time) = DATE ('schedule_start_time') ) AND ( SELECT end_time FROM test.schedule WHERE bus = busid AND DATE (end_time) = DATE ('schedule_start_time') ); IF CheckDate < 1 then INSERT INTO `test`.`schedule` ( `start_time` ,`end_time` ,`bus` ) VALUES ( 'schedule_start_time' ,'schedule_end_time' ,busid ); END IF ;END时不会在该状态下进行定义。或者，即使您最初将其设置为空数组，这仍然意味着将不会定义groups。在记录/呈现groups[0]中的任何内容之前，您必须检查它是否已定义以及是否有数据。

Answer 2

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

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

因此可以解决该问题：

this.state {
groups: null
}

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

2 个答案: