Javascript 如何在react中访问多维数组_Javascript_Reactjs_Jsx

Javascript 如何在react中访问多维数组

javascript reactjs

Javascript 如何在react中访问多维数组,javascript,reactjs,jsx,Javascript,Reactjs,Jsx,我正试图从“teams”数组中取出teamId等数据。我想知道你们当中是否有人对此有任何建议/帮助。我曾经使用过datas.map（data=>（）），但它不允许我从团队中获取数据，或者我做得不对，有没有其他方法可以映射出多维数组 { "gameId": 3226262256, "platformId": "NA1", "gameCreation": 1575583791449, "gameDuration": 1526, "queueId": 400,

我正试图从“teams”数组中取出teamId等数据。我想知道你们当中是否有人对此有任何建议/帮助。我曾经使用过datas.map（data=>（）），但它不允许我从团队中获取数据，或者我做得不对，有没有其他方法可以映射出多维数组

{
    "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 }) => {


  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>
              <h5 className="card-title">Team Data: players, bans, etc</h5>
              <h5 className="card-title">Participant info: champ, KDA, etc</h5>
            </Card>  
      </div> 
   )
}

      export default MatchData;

从“React”导入React；
导入“./MatchHistory.css”；
从“react引导/卡”导入卡；
常量MatchData=（{datas}）=>{
返回(
完全匹配数据测试拉。。。
车道：{datas.platformId}
MapId:{datas.MapId}
模式：{datas.gameMode}
持续时间：{datas.gameDuration}
季节性ID:{datas.preceptid}
版本：{datas.gameVersion}
类型：{datas.gameType}
团队数据：球员、禁令等
参与者信息：champ、KDA等
)
}
导出默认匹配数据；

您的代码和访问要在组件上呈现的数据的方式通常没有问题。如果您希望遍历

团队

并渲染它，那么如果执行类似于

datas.map（data=>（…）

的操作，它将不起作用，因为这将遍历整个

数据

对象

相反，您应该做的是执行

datas.team.map（data=>…）

，这将允许您使用在数组上工作的

team

属性来迭代值

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

const MatchData = ({ 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>
              <h5 className="card-title">Team Data: {
                datas.team.map(data => {
                  return <div> 
                    // other properties and values within each object in `team`
                  <div>
                })
              }</h5>
              <h5 className="card-title">Participant info: champ, KDA, etc</h5>
            </Card>  
      </div> 
   )
}

export default MatchData;

从“React”导入React；
导入“./MatchHistory.css”；
从“react引导/卡”导入卡；
常量MatchData=（{datas}）=>{
返回(
完全匹配数据测试拉。。。
车道：{datas.platformId}
MapId:{datas.MapId}
模式：{datas.gameMode}
持续时间：{datas.gameDuration}
季节性ID:{datas.preceptid}
版本：{datas.gameVersion}
类型：{datas.gameType}
团队数据：{
datas.team.map（数据=>{
返回
//“团队”中每个对象内的其他属性和值`
})
}
参与者信息：champ、KDA等
)
}
导出默认匹配数据；