javascript - React JS Ajax 数据循环

Question

我对 React 很陌生(今天正在构建我的第一个应用程序)。我正在使用 ajax 插件 ( react-ajax )，到目前为止，对 API 的单个 JSON 调用表现良好。然而，我正在努力学习如何循环整体以输出多个结果。

    var playersUrl = "/public/index.php/players.json";
    var PlayerList = React.createClass({
    getInitialState: function() {
        return {
            players: ''
        };
    },
    responseHandler: function(err, data){
        this.setState({
            players: data.body.data
        })
    },
    render: function() {
        return (
            React.createElement("ul", {className: "players"},
                React.createElement(Ajax, {url: playersUrl, onResponse: this.responseHandler}),
                this.state.players.map(function (player) {
                  return <li>player.id</li>
                })
            )
        )
    }
});
ReactDOM.render(<PlayerList />, document.getElementById('player-list'));

基本上希望编写一个each循环来输出一些用响应处理程序的JSON结果填充的Html。非常感谢!

{
   "data":[
      {
         "id":"18",
         "firstName":"Graham",
         "gender":{
            "label":"Male",
            "value":"male",
            "selected":true
         },
         "preferred_position":{
            "label":"Attacking",
            "value":"attacking",
            "selected":true
         },
         "dob":{
            "date":"1991-03-25 00:00:00.000000",
            "timezone_type":3,
            "timezone":"UTC"
         },
         "PassingRatingAvg":2.5,
         "ShootingRatingAvg":5,
         "DribblingRatingAvg":3,
         "PaceRatingAvg":2,
         "DefendingRatingAvg":1,
         "OverallRating":13.5,
         "TotalRating":13
      }
   ],
   "meta":{
      "pagination":{
         "total":1,
         "count":1,
         "per_page":100,
         "current_page":1,
         "total_pages":1
      }
   }
}

编辑:当前错误“PlayerList.js:18 Uncaught TypeError: this.state.players.map 不是函数”。

Answer 1

如果我正确理解您的问题，您的回复正文可能包含有关玩家的多条记录。但是你的responseHandler只处理一条记录的 JSON 格式。您能描述一下 JSON 响应正文的结构吗？基本上，您可以做的就是向您的州添加一个玩家字段以获取有关玩家的多个记录，并替换您的 <h1>{this.state.name}</h1>类似

this.state.players.map(function (player) {
  return <h1>player.name</h1>
})

和responsehandler应该是这样的:

function(err, data) {
    this.setState({players: data.body.data})
}

如果您没有使用 es6，您可以将其更改为:

var playersDiv = []
this.state.players.forEach(function(player) {
    playerDiv.push(<h1>player.name</h1>)
})
return playersDiv