我正在尝试从 .json 文件中获取数据并通过 View 显示结果。下面是 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"
}
]
}
我只想要“数据”字段而不是“主题”或“版权”字段,并且可以通过下面的 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 is not a function
render: function() {
var gameDate = this.props.data.map(function(data) {
return (
<h1>{data.modified_date} </h1>
);
});
我希望最终能够获得 scoreboard.json 的“数据”字段中的所有信息(即 data.games.game[] 数组)。 .map 函数似乎也不适用于此。
我如何在 .map 函数中获取“数据”字段(更具体地说是 modified_date
)?
编辑:我可以通过调用 data.games.modified_date 来记录 modified_date 但是,当尝试设置数据状态时:this.state.data = data.games.game
我收到一个新的警告:数组或迭代器中的每个 child 都应该有一个唯一的“键” Prop 。检查“GameDate”的渲染方法
最佳答案
正如 azium 所指出的,我的数据是一个对象,而不是像我的结果所期望的那样是一个数组。
为了在“游戏”字段中获取“游戏”数组,我将状态设置如下:
this.setState({data: data.data.games.game});
为了获得其他字段,我只是创建了一个新状态并通过一个属性传递它,即 modified_date:
this.state.date = data.data.games.modified_date
警告:数组或迭代器中的每个子项都应该有一个唯一的“key”属性。
通过在 .map 方法中添加一个“key”属性来修复:
render: function() {
var gameDate = this.props.data.map(function(data) {
return (
<h1 key={data.location} >{data.location} </h1>
);
});
关于javascript - ReactJS:this.props.data.map 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35419848/