反应映射对象，定位错误答案

【问题标题】：React mapping objects, targeting errors反应映射对象，定位错误
【发布时间】：2019-05-30 14:59:33
【问题描述】：

我在映射获取的对象时遇到了一些麻烦，我知道这是一个已知问题，但我已经被困两天了，所以我来寻求帮助。

我正在尝试从 api 输出 ul 上的数据，但我要么有错误，要么没有任何输出，我知道我以错误的方式定位对象内部的数据，这是我第一次尝试使用这种键定位对象

我有一个看起来像这样的对象“名称”：

[Array(20)]
  0: Array(20)
    0:
      avatar: ""
      country: "RU"
      games: (3) [{…}, {…}, {…}]
      nickname: "d2mash"
      player_id: "07982364-a458-4a1f-b6d6-1be146db9126"
      status: "AVAILABLE"
      verified: true
      __proto__: Object
    1: {player_id: "cab2a609-de2f-4023-a9c7-af89d5292c96", nickname: "D0cC-", status: "BUSY", games: Array(1), country: "NL", …}
    2: {player_id: "d67a944f-1c1d-4d75-a7bf-d52c4b30e7db", nickname: "r1d3Rz", status: "AVAILABLE", games: Array(1), country: "RO", …}
    3: {player_id: "f40bef0d-d40a-48d0-8c53-5a513c35bd3a", nickname: "dotademon", status: "AVAILABLE", games: Array(1), country: "US", …}
    4: {player_id: "dca784fa-546b-43b7-adf6-cf537d858d4f", nickname: "degeneral", status: "AVAILABLE", games: Array(2), country: "UA", …}
    5: {player_id: "e72a43cd-d214-4d4c-989a-efb1d3e7df37", nickname: "daave-", status: "AVAILABLE", games: Array(1), country: "US", …}
    6: {player_id: "4e093c2c-f277-4877-a200-029ae6d8602f", nickname: "ddk", status: "AVAILABLE", games: Array(5), country: "US", …}
    7: {player_id: "ef629874-bf6e-4066-8612-09e0428e923c", nickname: "dieZzz", status: "AVAILABLE", games: Array(3), country: "RU", …}
    8: {player_id: "77995857-d14d-47ed-a150-4f175f70654e", nickname: "durpdurp", status: "AVAILABLE", games: Array(1), country: "US", …}
    9: {player_id: "e3ed56b6-138f-4141-b6c9-ba6eab7bfc24", nickname: "dengue", status: "AVAILABLE", games: Array(3), country: "PT", …}
    10: {player_id: "d6bd0d6f-a068-4e10-b9a4-129297c8691f", nickname: "disco doplan", status: "BUSY", games: Array(2), country: "SE", …}
    11: {player_id: "7e80ed2a-8e39-457e-95c2-1c9ba9449daf", nickname: "dupreeh", status: "BUSY", games: Array(1), country: "DK", …}
    12: {player_id: "32772d2f-fb63-4a84-ac06-4c2e20f49082", nickname: "denis-", status: "AVAILABLE", games: Array(1), country: "DE", …}
    13: {player_id: "089df523-86dd-4705-944f-f012adb5a0f8", nickname: "dream3r---", status: "AVAILABLE", games: Array(1), country: "BG", …}
    14: {player_id: "b8b709e5-96f8-4cf5-8348-95b8b67e0b34", nickname: "DreadAV", status: "AVAILABLE", games: Array(1), country: "RU", …}
    15: {player_id: "5fd703b0-6762-44c8-9284-b8f01ef70e71", nickname: "DendiGoD", status: "AVAILABLE", games: Array(1), country: "UA", …}
    16: {player_id: "6c4f1a76-1341-4513-90ac-8d43dd1c86b6", nickname: "dipparn", status: "AVAILABLE", games: Array(1), country: "SE", …}
    17: {player_id: "ae0bfe74-ec96-4499-910f-e02acd5be700", nickname: "DuBu-", status: "AVAILABLE", games: Array(1), country: "CA", …}
    18: {player_id: "d6bc4849-5256-4463-a38e-bcd77fc31ff9", nickname: "device", status: "BUSY", games: Array(1), country: "DK", …}
    19: {player_id: "4bb4503f-5272-40dc-8165-d050290db66a", nickname: "desi", status: "AVAILABLE", games: Array(1), country: "US", …}
    length: 20
    __proto__: Array(0)
    length: 1
    __proto__: Array(0)

然后我将它传递给这样的组件：

{
    !isLoading && 
    <PlayerSearchResult players={names} />
}

我的组件：

class PlayerSearchItem extends Component {
  public render() {
    return (
      <li key={this.props.cle}>
        <Link to={"#"}>nom - {this.props.pseudo}</Link>
      </li>
    );
  }
}

class PlayerSearchResult extends Component {
  public render() {
    return (
      <div>
        <ul>
          {Object.keys(this.props.players).map((player, i) => (
            <PlayerSearchItem
              cle={player[player].player_id}
              pseudo={players[i]}
            />
          ))}
        </ul>
      </div>
    );
  }
}

不要介意我定位数据的方式，这是我的众多尝试之一。

【问题讨论】：

您介意在此处复制并粘贴您的数据而不是添加屏幕截图吗？它将帮助人们调试您的问题并为您提供更好的答案
可能不是您搜索的错误，但 cle={player[player].player_id} 的 player[player] 部分看起来您为播放器对象使用了不正确的键，可能将其更改为player.player_id，或players[player]。 player_id

标签： javascript reactjs object array.prototype.map

【解决方案1】：

我认为你的地图看起来不对

这个：

Object.keys(this.props.players).map((player, i) => ( <
  PlayerSearchItem cle = {
    player[player].player_id
  }
  pseudo = {
    players[i]
  }
  />
))

应该是：

Object.keys(this.props.players).map((player, i) => ( <
  PlayerSearchItem cle = {
    player.player_id
  }
  pseudo = {
    player
  }
  key={player.player_id}
  />
))

然后从您的数据截图来看，您的数据看起来像是一个包含 20 个项目的数组，其中第一个元素是一个包含 20 个项目的数组，其中从 1 到 20 的项目是真正的玩家。

【讨论】：

感谢您的回复，我试过了，我的输出为“0”（猜测的关键），它没有映射，因为我没有 20 个项目，我只有一个显示.
我认为你应该通过<PlayerSearchResult players={names[0].slice(1)} />查看屏幕截图，但请注意你的数据并避免在这里截图，粘贴代码，易于复制和粘贴，易于阅读和调试
我已经更新了我的帖子，希望这是你所加速的，当我点说我有'无法读取未定义的属性'切片'时，当我不切片时，我得到'无法转换未定义或null to object' 我猜名字 [0] 是未定义的，不应该是