ReactJS:this.props.data.map不是一个函数 [英] ReactJS: this.props.data.map is not a function

问题描述

我正在尝试从.json文件中获取数据，并通过视图显示结果.下面是scoreboard.json文件.

I am trying to get the data from a .json file and displaying the results through a view. Below is the scoreboard.json file.

{
"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请求来做到这一点.

I only want the "data" field and not the "subject" or "copyright" fields and am able to do so through the ajax request below.

	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

I pass the state down to the receiving file but, when I try to call it I receive a 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函数似乎对此也不起作用.

I want to be able to get all the information that is in the "data" field of the scoreboard.json eventually (i.e. data.games.game[] array). The .map function Does not seem to work for this either.

如何在.map函数中获取数据"字段(更具体地为modified_date)?

How would I get the "data" fields (more specifically the modified_date) in the .map function?

我可以通过调用data.games.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"

I can log the modified_date by calling data.games.modified_date but, when trying to set the state of data: this.state.data = data.games.game I receive a new warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of "GameDate"

推荐答案

正如azium指出的那样，我的数据是一个对象，而不是像我的结果所期望的数组 .

As pointed out by azium my data is an object and not an array like my results were expecting.

要获取游戏"字段中的游戏"数组，我将状态设置为以下内容:

To get the "game" array inside the "games" field I set the state as the following:

this.setState({data: data.data.games.game});

要获取其他字段，我只需创建一个新状态并将其通过道具(即Modifyed_date)传递即可:

To get the other fields I simply created a new state and passed it through a prop i.e. modified_date:

this.state.date = data.data.games.modified_date

警告:Each child in an array or iterator should have a unique "key" prop.已通过在.map方法内添加键"属性来修复:

The warning: Each child in an array or iterator should have a unique "key" prop. was fixed by adding a "key" property inside the .map method:

render: function() {
    var gameDate = this.props.data.map(function(data) {
        return (
            <h1 key={data.location} >{data.location} </h1>
        );
    });

这篇关于ReactJS:this.props.data.map不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！