ReactJS：this.props.data.map 不是函数

Posted 2023-02-22

【中文标题】ReactJS：this.props.data.map 不是函数

【英文标题】：ReactJS: this.props.data.map is not a function

【发布时间】：2016-05-26 23:33:53

【问题描述】：

我正在尝试从 .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"
        
     ]
   

我只想要“数据”字段而不是“主题”或“版权”字段，并且能够通过下面的 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 我收到一个新警告：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。没有要映射的数组。

我认为您应该复制并粘贴更多的 json 文件。您发布的文件有一些语法错误并且没有显示多个游戏，就像您的问题可能暗示的那样。

感谢 azium，我已经编辑了 json 文件以包含另一个游戏。就像您发布的一样，我也找到了 games.modified_date，谢谢！

我明白了.. 所以game 是games 中的一个数组。所以你可以做data.games.game.map(game => <div> game.game_type </div>)。每个游戏都没有自己的修改日期。

感谢 azium 这行得通，但是，我收到了这个警告：Each child in an array or iterator should have a unique "key" prop. Check the render method of "GameDate" 编辑：刚刚在我的视图中添加了一个“key”属性，这修复了警告。

【参考方案1】：

正如 azium 所指出的，我的数据是一个 object 而不是 array 就像我的结果所期望的那样。

为了在“games”字段中获取“game”数组，我将状态设置如下：

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

为了获取其他字段，我只是创建了一个新状态并通过一个 prop 传递它，即 modified_date：

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

警告：Each child in an array or iterator should have a unique "key" prop. 已通过在 .map 方法中添加“key”属性得到修复：

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