Array.map返回无法读取未定义的属性'map'

Question

我一直试图在此数组中访问和显示“团队”，但是当我尝试将其映射以显示数据时，出现错误：“无法读取未定义的属性'Map'。每当我显示其他部分时，数组，它工作正常。我只是数组中的“ teams”数组有问题。不胜感激<3感谢。

这是我的数据数组：

{
    "gameId": 3226262256,
    "platformId": "NA1",
    "gameCreation": 1575583791449,
    "gameDuration": 1526,
    "queueId": 400,
    "mapId": 11,
    "seasonId": 13,
    "gameVersion": "9.23.299.3089",
    "gameMode": "CLASSIC",
    "gameType": "MATCHED_GAME",
    "teams": [
        {
            "teamId": 100,
            "win": "Fail",
            "firstBlood": true,
            "firstTower": false,
            "firstInhibitor": false,
            "firstBaron": false,
            "firstDragon": false,
            "firstRiftHerald": false,
            "towerKills": 1,
            "inhibitorKills": 0,
            "baronKills": 0,
            "dragonKills": 2,
            "vilemawKills": 0,
            "riftHeraldKills": 0,
            "dominionVictoryScore": 0,
            "bans": [
                {
                    "championId": 111,
                    "pickTurn": 1
                },
                {
                    "championId": 25,
                    "pickTurn": 2
                },
                {
                    "championId": 24,
                    "pickTurn": 3
                },
                {
                    "championId": 235,
                    "pickTurn": 4
                },
                {
                    "championId": 238,
                    "pickTurn": 5
                }
            ]
        },
        {
            "teamId": 200,
            "win": "Win",
            "firstBlood": false,
            "firstTower": true,
            "firstInhibitor": true,
            "firstBaron": true,
            "firstDragon": true,
            "firstRiftHerald": true,
            "towerKills": 9,
            "inhibitorKills": 2,
            "baronKills": 1,
            "dragonKills": 1,
            "vilemawKills": 0,
            "riftHeraldKills": 1,
            "dominionVictoryScore": 0,
            "bans": [
                {
                    "championId": 266,
                    "pickTurn": 6
                },
                {
                    "championId": 89,
                    "pickTurn": 7
                },
                {
                    "championId": 64,
                    "pickTurn": 8
                },
                {
                    "championId": -1,
                    "pickTurn": 9
                },
                {
                    "championId": 141,
                    "pickTurn": 10
                }
            ]
        }
    ],

还有我的代码，我试图将其映射到：

import React from 'react';
import './MatchHistory.css';
import Card from 'react-bootstrap/Card';

const MatchData = ({ datas }) => {
console.log('data: ' + datas);
  return (
        <div>    
            <Card>
              <h5 className="card-title">Full Match data test Pull...</h5>
              <h5 className="card-title">Lane:{datas.platformId}</h5> 
              <h5 className="card-title">MapId:{datas.mapId}</h5>
              <h5 className="card-title">Mode: {datas.gameMode}</h5>
              <h5 className="card-title">Duration: {datas.gameDuration}</h5>
              <h5 className="card-title">SeasonId: {datas.seasonId}</h5>
              <h5 className="card-title">Version: {datas.gameVersion}</h5>
              <h5 className="card-title">Type: {datas.gameType}</h5>
               {datas.teams.map(data => (            
               <h5 className="card-title">Type: {data.teamId}</h5>))}
              <h5 className="card-title">Participant info: champ, KDA, etc</h5>
            </Card>  
      </div> 
   )
}

      export default MatchData;

Answer 1

尝试一下

{datas.teams && datas.teams.map(({teamId})=> (            
  <h5 className="card-title" key={teamId}>Type: {teamId}</h5>))
}

Answer 2

您可以使用类似的方法访问第一个团队的团队ID

data["teams"][0]["teamId"]

希望这会有所帮助

Answer 3

您的格式/语法略有偏离。尝试

{datas.teams.map(data => <h5 className="card-title">Type: {data.teamId}</h5>)}

或

{datas.teams.map(data => {
     return <h5 className="card-title">Type: {data.teamId}</h5>
})}

Answer 4

问题在这里，

{data.teams.teamId}

您没有teams对象。您应该这样做，

{data.teamId}

[需要额外的照顾，您可以这样做，

{datas.teams && datas.teams.length && datas.teams.map(data => (            
    <h5 className="card-title">Type: {data.teamId}</h5>)
)}