javascript - React/JS 数组表现不同

Question

我正在尝试通过从 get 请求中读取 json 信息来设置数组。下面我对其进行硬编码以进行测试，它似乎在下拉按钮中打印列表。但是在我的 fetch json 请求中，如果我从teamList 打印，它似乎不起作用，如果我从团队（硬编码）打印，它会起作用。

这是我的控制台输出，我还注意到它们在第一行看起来有点不同，即使它们都是相同的确切数组。这里有什么问题吗？

let teamsList = []

    fetch(`/api/teams`)
        .then(res => res.json())
        .then(responseJSON => {
          responseJSON.map(cls => (
            teamsList.push(cls.name)
          ))
        })

    let test = ['Chaos', 'High Elves', 'Orcs']

    console.log(teamsList)
    console.log(test)

    // doesnt work
    return (
      <DropdownButton id="dropdown-team-button" title={this.props.team_name}>
          {teamsList.map(cls => (
              <div key={cls}>
                  <Dropdown.Item onClick={this.handleTeamSelection} title={cls}>{cls}</Dropdown.Item>
              </div>
          ))}
      </DropdownButton>
    )

    // works
    return (
      <DropdownButton id="dropdown-team-button" title={this.props.team_name}>
          {test.map(cls => (
              <div key={cls}>
                  <Dropdown.Item onClick={this.handleTeamSelection} title={cls}>{cls}</Dropdown.Item>
              </div>
          ))}
      </DropdownButton>
    )

标签： javascriptarraysreactjs