我正在尝试从一个.json文件获取数据,并通过视图来显示结果。以下是scoreboard.json文件。
{
"subject":"scoreboard",
"copyright":"Copyright 2015",
"data":
"games":{
"next_day_date":"2015-07-22",
"modified_date":"2015-08-04T07:34:50Z",
"month":"07",
"year":"2015",
"game":[
{
"game_type":"R",
"double_header_sw":"N",
"location":"Some City, State",
},
{
"game_type":"R",
"double_header_sw":"N",
"location":"Another City, Another State"
}
]
}
我只需要"data"字段,而不是"subject"或"copyright"字段,可以通过下面的ajax请求实现。
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
console.log(data.data);
this.setState({data: data.data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
我将状态传递给接收文件,但是当我尝试调用它时,会收到一个TypeError:this.props.data.map不是函数
。
render: function() {
var gameDate = this.props.data.map(function(data) {
return (
<h1>{data.modified_date} </h1>
);
});
modified_date
)?编辑:我可以通过调用data.games.modified_date来记录modified_date,但是当尝试设置数据状态时:
this.state.data = data.games.game
我会收到一个新的警告:Each child in an array or iterator should have a unique "key" prop. Check the render method of "GameDate"
data
不是一个数组,而是一个对象。data.games
也是一个对象。如果你只想要日期,你可以使用data.games.modified_date
。这里没有需要遍历的数组。 - aziumgame
是在games
内部的一个数组。因此,您可以执行data.games.game.map(game => <div>{ game.game_type }</div>)
。每个游戏都没有自己的修改日期。 - aziumEach child in an array or iterator should have a unique "key" prop. Check the render method of "GameDate"
。编辑:我刚刚在我的视图中添加了一个“key”属性,这解决了警告问题。 - Simon