我无法在React中映射来自Express API的数据。
我以前从Express API服务映射数据没有问题,但是我认为数据以2d数组或其他形式显示。我尝试像二维数组[0] [0]一样访问它,但是没有用。我可以在阵列中的Google Chrome中查看数据。
我从邮递员那里得到了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
}
]
}
答案 0 :(得分:0)
您所拥有的代码在大多数情况下都是正确的,看起来您只需要将嵌套数组添加到默认值即可:
constructor(props) {
super(props);
this.state = {
selectedWeek: 1,
selectedSeason: 2015,
scoreData:[ [] ], // <--- this right here
};
}
或者将scoreData
设置为嵌套数组