ReactJS：this.props.data.map不是一个函数。

Question

我正在尝试从一个.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>
   );
  });

我希望能够获得scoreboard.json中“data”字段中的所有信息（即data.games.game []数组）。使用.map函数对此似乎不起作用。 我如何在.map函数中获取“data”字段（更具体地说是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"

- Simon

---

data 不是一个数组，而是一个对象。data.games 也是一个对象。如果你只想要日期，你可以使用 data.games.modified_date。这里没有需要遍历的数组。 - azium

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

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

我明白了，所以game是在games内部的一个数组。因此，您可以执行data.games.game.map(game => <div>{ game.game_type }</div>)。每个游戏都没有自己的修改日期。 - azium

谢谢azium，这个方法很有效，但是我收到了一个警告：Each child in an array or iterator should have a unique "key" prop. Check the render method of "GameDate"。编辑：我刚刚在我的视图中添加了一个“key”属性，这解决了警告问题。 - Simon

Answer 1

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

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

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>
        );
    });

- Simon