来自 Express API 的反应映射数组

【问题标题】：React mapping array from Express API来自 Express API 的反应映射数组
【发布时间】：2019-06-12 08:39:04
【问题描述】：

我在 React 中映射 Express API 的数据时遇到问题。

我之前从我的 Express API 服务映射数据没有问题，但我认为数据以二维数组或其他形式显示。我尝试像二维数组 [0][0] 一样访问它，但这没有用。我可以在我的数组中看到 Google Chrome 中的数据。

我从 Postman 那里得到了下面 JSON 格式的数据。

非常感谢您的帮助。

反应类：

class ScoreData extends React.Component{

constructor(props) {
    super(props);
    this.state = {
        selectedWeek: 1,
        selectedSeason: 2015,
        scoreData:[]            
    };
}

componentDidMount(){
    fetch('/users/2015/1')
    .then(res => res.json())
    .then(dataArray => this.setState({scoreData: dataArray.data})); 

}

地图功能：

return (
<div>
    <h1>NFL Score Data</h1>

    <button onClick={this.handleButtonClick}>Click me</button>

    {this.state.scoreData[0].map(currentScoreData=>
        <div >
            <p>{currentScoreData.PK_GameID}</p>
            <p>{currentScoreData.homeTeamPoints}</p>
            <p>{currentScoreData.awayTeamPoints}</p>
            <p>{currentScoreData.gameDate}</p>
            <p>{currentScoreData.FK_AwayTeamID}</p>
            <p>{currentScoreData.FK_HomeTeamID}</p>
        </div>
    )}

{

    "data": [
        [
            {
                "PK_GameID": 1591,
                "homeTeamPoints": 0,
                "awayTeamPoints": 10,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 31,
                "FK_HomeTeamID": 3
            },
            {
                "PK_GameID": 1591,
                "homeTeamPoints": 0,
                "awayTeamPoints": 17,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 31,
                "FK_HomeTeamID": 3
            },
            {
                "PK_GameID": 1591,
                "homeTeamPoints": 8,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 31,
                "FK_HomeTeamID": 3
            },
            {
                "PK_GameID": 1591,
                "homeTeamPoints": 0,
                "awayTeamPoints": 3,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 31,
                "FK_HomeTeamID": 3
            },
            {
                "PK_GameID": 1595,
                "homeTeamPoints": 7,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 6,
                "FK_HomeTeamID": 4
            },
            {
                "PK_GameID": 1595,
                "homeTeamPoints": 9,
                "awayTeamPoints": 7,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 6,
                "FK_HomeTeamID": 4
            },
            {
                "PK_GameID": 1595,
                "homeTeamPoints": 7,
                "awayTeamPoints": 3,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 6,
                "FK_HomeTeamID": 4
            },
            {
                "PK_GameID": 1595,
                "homeTeamPoints": 10,
                "awayTeamPoints": 10,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 6,
                "FK_HomeTeamID": 4
            },
            {
                "PK_GameID": 1589,
                "homeTeamPoints": 0,
                "awayTeamPoints": 7,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 27,
                "FK_HomeTeamID": 5
            },
            {
                "PK_GameID": 1589,
                "homeTeamPoints": 3,
                "awayTeamPoints": 3,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 27,
                "FK_HomeTeamID": 5
            },
            {
                "PK_GameID": 1589,
                "homeTeamPoints": 0,
                "awayTeamPoints": 7,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 27,
                "FK_HomeTeamID": 5
            },
            {
                "PK_GameID": 1589,
                "homeTeamPoints": 7,
                "awayTeamPoints": 7,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 27,
                "FK_HomeTeamID": 5
            },
            {
                "PK_GameID": 1602,
                "homeTeamPoints": 3,
                "awayTeamPoints": 7,
                "gameDate": "2015-12-14T05:00:00.000Z",
                "FK_AwayTeamID": 2,
                "FK_HomeTeamID": 8
            },
            {
                "PK_GameID": 1602,
                "homeTeamPoints": 14,
                "awayTeamPoints": 10,
                "gameDate": "2015-12-14T05:00:00.000Z",
                "FK_AwayTeamID": 2,
                "FK_HomeTeamID": 8
            },
            {
                "PK_GameID": 1602,
                "homeTeamPoints": 7,
                "awayTeamPoints": 7,
                "gameDate": "2015-12-14T05:00:00.000Z",
                "FK_AwayTeamID": 2,
                "FK_HomeTeamID": 8
            },
            {
                "PK_GameID": 1602,
                "homeTeamPoints": 7,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-14T05:00:00.000Z",
                "FK_AwayTeamID": 2,
                "FK_HomeTeamID": 8
            },
            {
                "PK_GameID": 1594,
                "homeTeamPoints": 3,
                "awayTeamPoints": 3,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 25,
                "FK_HomeTeamID": 9
            },
            {
                "PK_GameID": 1594,
                "homeTeamPoints": 10,
                "awayTeamPoints": 6,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 25,
                "FK_HomeTeamID": 9
            },
            {
                "PK_GameID": 1594,
                "homeTeamPoints": 3,
                "awayTeamPoints": 21,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 25,
                "FK_HomeTeamID": 9
            },
            {
                "PK_GameID": 1594,
                "homeTeamPoints": 0,
                "awayTeamPoints": 21,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 25,
                "FK_HomeTeamID": 9
            },
            {
                "PK_GameID": 1590,
                "homeTeamPoints": 0,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 28,
                "FK_HomeTeamID": 10
            },
            {
                "PK_GameID": 1590,
                "homeTeamPoints": 0,
                "awayTeamPoints": 7,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 28,
                "FK_HomeTeamID": 10
            },
            {
                "PK_GameID": 1590,
                "homeTeamPoints": 7,
                "awayTeamPoints": 7,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 28,
                "FK_HomeTeamID": 10
            },
            {
                "PK_GameID": 1590,
                "homeTeamPoints": 7,
                "awayTeamPoints": 7,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 28,
                "FK_HomeTeamID": 10
            },
            {
                "PK_GameID": 1603,
                "homeTeamPoints": 3,
                "awayTeamPoints": 14,
                "gameDate": "2015-12-17T05:00:00.000Z",
                "FK_AwayTeamID": 23,
                "FK_HomeTeamID": 10
            },
            {
                "PK_GameID": 1603,
                "homeTeamPoints": 0,
                "awayTeamPoints": 7,
                "gameDate": "2015-12-17T05:00:00.000Z",
                "FK_AwayTeamID": 23,
                "FK_HomeTeamID": 10
            },
            {
                "PK_GameID": 1603,
                "homeTeamPoints": 3,
                "awayTeamPoints": 7,
                "gameDate": "2015-12-17T05:00:00.000Z",
                "FK_AwayTeamID": 23,
                "FK_HomeTeamID": 10
            },
            {
                "PK_GameID": 1603,
                "homeTeamPoints": 17,
                "awayTeamPoints": 3,
                "gameDate": "2015-12-17T05:00:00.000Z",
                "FK_AwayTeamID": 23,
                "FK_HomeTeamID": 10
            },
            {
                "PK_GameID": 1593,
                "homeTeamPoints": 7,
                "awayTeamPoints": 7,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 1,
                "FK_HomeTeamID": 14
            },
            {
                "PK_GameID": 1593,
                "homeTeamPoints": 3,
                "awayTeamPoints": 10,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 1,
                "FK_HomeTeamID": 14
            },
            {
                "PK_GameID": 1593,
                "homeTeamPoints": 10,
                "awayTeamPoints": 3,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 1,
                "FK_HomeTeamID": 14
            },
            {
                "PK_GameID": 1593,
                "homeTeamPoints": 0,
                "awayTeamPoints": 3,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 1,
                "FK_HomeTeamID": 14
            },
            {
                "PK_GameID": 1604,
                "homeTeamPoints": 6,
                "awayTeamPoints": 3,
                "gameDate": "2015-12-19T05:00:00.000Z",
                "FK_AwayTeamID": 3,
                "FK_HomeTeamID": 16
            },
            {
                "PK_GameID": 1604,
                "homeTeamPoints": 3,
                "awayTeamPoints": 7,
                "gameDate": "2015-12-19T05:00:00.000Z",
                "FK_AwayTeamID": 3,
                "FK_HomeTeamID": 16
            },
            {
                "PK_GameID": 1604,
                "homeTeamPoints": 0,
                "awayTeamPoints": 3,
                "gameDate": "2015-12-19T05:00:00.000Z",
                "FK_AwayTeamID": 3,
                "FK_HomeTeamID": 16
            },
            {
                "PK_GameID": 1604,
                "homeTeamPoints": 10,
                "awayTeamPoints": 3,
                "gameDate": "2015-12-19T05:00:00.000Z",
                "FK_AwayTeamID": 3,
                "FK_HomeTeamID": 16
            },
            {
                "PK_GameID": 1601,
                "homeTeamPoints": 7,
                "awayTeamPoints": 3,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 7,
                "FK_HomeTeamID": 17
            },
            {
                "PK_GameID": 1601,
                "homeTeamPoints": 10,
                "awayTeamPoints": 3,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 7,
                "FK_HomeTeamID": 17
            },
            {
                "PK_GameID": 1601,
                "homeTeamPoints": 3,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 7,
                "FK_HomeTeamID": 17
            },
            {
                "PK_GameID": 1601,
                "homeTeamPoints": 7,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 7,
                "FK_HomeTeamID": 17
            },
            {
                "PK_GameID": 1599,
                "homeTeamPoints": 0,
                "awayTeamPoints": 6,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 21,
                "FK_HomeTeamID": 18
            },
            {
                "PK_GameID": 1599,
                "homeTeamPoints": 0,
                "awayTeamPoints": 6,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 21,
                "FK_HomeTeamID": 18
            },
            {
                "PK_GameID": 1599,
                "homeTeamPoints": 9,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 21,
                "FK_HomeTeamID": 18
            },
            {
                "PK_GameID": 1599,
                "homeTeamPoints": 6,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 21,
                "FK_HomeTeamID": 18
            },
            {
                "PK_GameID": 1592,
                "homeTeamPoints": 0,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 11,
                "FK_HomeTeamID": 19
            },
            {
                "PK_GameID": 1592,
                "homeTeamPoints": 0,
                "awayTeamPoints": 10,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 11,
                "FK_HomeTeamID": 19
            },
            {
                "PK_GameID": 1592,
                "homeTeamPoints": 3,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 11,
                "FK_HomeTeamID": 19
            },
            {
                "PK_GameID": 1592,
                "homeTeamPoints": 0,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 11,
                "FK_HomeTeamID": 19
            },
            {
                "PK_GameID": 1596,
                "homeTeamPoints": 7,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 12,
                "FK_HomeTeamID": 22
            },
            {
                "PK_GameID": 1596,
                "homeTeamPoints": 7,
                "awayTeamPoints": 6,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 12,
                "FK_HomeTeamID": 22
            },
            {
                "PK_GameID": 1596,
                "homeTeamPoints": 7,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 12,
                "FK_HomeTeamID": 22
            },
            {
                "PK_GameID": 1596,
                "homeTeamPoints": 14,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 12,
                "FK_HomeTeamID": 22
            },
            {
                "PK_GameID": 1588,
                "homeTeamPoints": 7,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 15,
                "FK_HomeTeamID": 23
            },
            {
                "PK_GameID": 1588,
                "homeTeamPoints": 10,
                "awayTeamPoints": 10,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 15,
                "FK_HomeTeamID": 23
            },
            {
                "PK_GameID": 1588,
                "homeTeamPoints": 7,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 15,
                "FK_HomeTeamID": 23
            },
            {
                "PK_GameID": 1588,
                "homeTeamPoints": 0,
                "awayTeamPoints": 7,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 15,
                "FK_HomeTeamID": 23
            },
            {
                "PK_GameID": 1600,
                "homeTeamPoints": 0,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 16,
                "FK_HomeTeamID": 26
            },
            {
                "PK_GameID": 1600,
                "homeTeamPoints": 0,
                "awayTeamPoints": 14,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 16,
                "FK_HomeTeamID": 26
            },
            {
                "PK_GameID": 1600,
                "homeTeamPoints": 7,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 16,
                "FK_HomeTeamID": 26
            },
            {
                "PK_GameID": 1600,
                "homeTeamPoints": 0,
                "awayTeamPoints": 14,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 16,
                "FK_HomeTeamID": 26
            },
            {
                "PK_GameID": 1598,
                "homeTeamPoints": 7,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 13,
                "FK_HomeTeamID": 29
            },
            {
                "PK_GameID": 1598,
                "homeTeamPoints": 7,
                "awayTeamPoints": 7,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 13,
                "FK_HomeTeamID": 29
            },
            {
                "PK_GameID": 1598,
                "homeTeamPoints": 7,
                "awayTeamPoints": 14,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 13,
                "FK_HomeTeamID": 29
            },
            {
                "PK_GameID": 1598,
                "homeTeamPoints": 3,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 13,
                "FK_HomeTeamID": 29
            },
            {
                "PK_GameID": 1597,
                "homeTeamPoints": 0,
                "awayTeamPoints": 21,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 24,
                "FK_HomeTeamID": 30
            },
            {
                "PK_GameID": 1597,
                "homeTeamPoints": 0,
                "awayTeamPoints": 7,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 24,
                "FK_HomeTeamID": 30
            },
            {
                "PK_GameID": 1597,
                "homeTeamPoints": 0,
                "awayTeamPoints": 10,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 24,
                "FK_HomeTeamID": 30
            },
            {
                "PK_GameID": 1597,
                "homeTeamPoints": 0,
                "awayTeamPoints": 0,
                "gameDate": "2015-12-13T05:00:00.000Z",
                "FK_AwayTeamID": 24,
                "FK_HomeTeamID": 30
            }
        ],
        {
            "fieldCount": 0,
            "affectedRows": 0,
            "insertId": 0,
            "serverStatus": 2,
            "warningCount": 0,
            "message": "",
            "protocol41": true,
            "changedRows": 0
        }
    ]
}

【问题讨论】：

  • 那么，您面临的问题是什么？你的预期输出是什么？

标签： json reactjs express


【解决方案1】：

您拥有的代码大部分是正确的，看起来您只需要将嵌套数组添加到默认值：

constructor(props) {
    super(props);
    this.state = {
         selectedWeek: 1,
         selectedSeason: 2015,
         scoreData:[ [] ], // <--- this right here
    };
}

或者将scoreData 设置为嵌套数组

【讨论】：

  • 非常感谢。马上就上班了。我学到的另一件事 :) 将其映射为：{this.state.scoreData[0].map(currentScoreData=>
猜你喜欢
  • 2021-11-09
  • 2019-07-20
  • 2020-08-20
  • 1970-01-01
  • 2020-10-31
  • 2020-11-01
  • 2020-01-07
  • 2021-06-17
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode