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

基本上要编写每个循环来输出一些填充了响应处理程序的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
      }
   }
}

编辑：当前错误＆＃34; PlayerList.js：18未捕获TypeError：this.state.players.map不是函数＆＃34;。

Answer 1

如果我正确理解您的问题，您的回复正文可能会包含有关玩家的多条记录。但是你的responseHandler只处理一条记录的JSON格式。你能描述一下JSON响应体的结构吗？基本上，你可以做的是为你的州添加一个球员区域，以获得关于球员的多个记录，并用{/ p>之类的东西替换你的<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

Answer 2

我们爱的婴儿，YEAH

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 key={player.id}>{player.username}</li>
                })
            )
        )
    }
});
ReactDOM.render(<PlayerList />, document.getElementById('player-list'));

所以主要问题是我没有将初始状态中的'玩家'定义为数组。这会阻止map或forEach函数触发，我猜这与React如何呈现有关？接下来，我需要在动态子项上设置一些键，每个子项的身份和状态必须在渲染过程中保持。

感谢@yuchen指出我正确的方向。

React JS Ajax数据循环

2 个答案: