React / JS数组的行为不同

Question

我试图通过从get请求中读取json信息来设置数组。在下面，我对其进行了硬编码以进行测试，并且似乎在下拉按钮中打印了列表。但是在我的json提取请求中，如果我从teamsList打印，则似乎不起作用，如果从teams（硬编码）进行打印，则它可以正常工作。

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

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