React JS Ajax Data Loop

React JS Ajax Data Loop

本文关键字：Loop Data Ajax JS React      更新时间：2023-09-26

我对 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 Uncatch TypeError：this.state.players.map 不是一个函数"。

如果我正确理解您的问题，您的回复正文可能包含有关玩家的多条记录。但您的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

爱尔兰宝贝我们做到了，是的

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

所以主要问题是我没有将初始状态下的"玩家"定义为数组。这阻止了地图或 forEach 函数的触发，我猜这与 React 的渲染方式有关？接下来，我需要在动态子项上设置一些键，每个子项的身份和状态必须在渲染通道中维护。

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

相关文章：