React.js通过数组创建循环

Question

我正在尝试显示10位玩家的表格。我通过ajax获取数据，并将其作为道具传递给我的孩子。

var CurrentGame = React.createClass({

  // get game info
  loadGameData: function() {
    $.ajax({
      url: '/example.json',
      dataType: 'json',
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error('#GET Error', status, err.toString());
      }.bind(this)
    });
  },

  getInitialState: function(){
    return {data: []};
  },

  componentDidMount: function() {
    this.loadGameData();
  },

  render: function() {
    return (
      <div className="CurrentGame">
        <h1> Current Game Information</h1>
        <PlayerList data={this.state.data}/>
      </div>
    );
  }
});

现在，我需要一个列表组件来渲染播放器：

var PlayerList = React.createClass({


  render: function() {

    // This prints the correct data
    console.log(this.props.data);

    return (
      <ul className="PlayerList">
        // I'm the Player List {this.props.data}
        // <Player author="The Mini John" />

        {
          this.props.data.participants.map(function(player) {
            return <li key={player}>{player}</li>
          })
        }
      </ul>
    )
  }
});

这给了我一个Uncaught TypeError: Cannot read property 'map' of undefined。

我不确定发生了什么，我的控制台日志显示了正确的数据，但是以某种方式我无法在返回中访问它。

我想念什么？

Answer 1

在CurrentGame组件中，您需要更改初始状态，因为您正在尝试使用for，participants但是此属性是undefined导致错误的原因。

getInitialState: function(){
    return {
       data: {
          participants: [] 
       }
    };
},

此外，如player在.map是Object你应该从它那里得到的属性

this.props.data.participants.map(function(player) {
   return <li key={player.championId}>{player.summonerName}</li>
   // -------------------^^^^^^^^^^^---------^^^^^^^^^^^^^^
})

Example