React JS Ajax Data Loop

Question

Я очень недавно реагирую (создаю свое первое приложение сегодня). Я использую плагин ajax (react-ajax) и до сих пор так хорош на одном JSON-вызове API. Тем не менее, я изо всех сил пытаюсь научиться цитировать, чтобы получить несколько результатов.

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

В основном ищет, чтобы написать каждый цикл для вывода некоторых HTML заполняется с результатами JSON из обработчика ответа. Огромное спасибо!

{ 
    "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 
     } 
    } 
} 

Edit: Текущая ошибка "PlayerList.js: 18 Uncaught TypeError: this.state.players.map не является функцией".

Answer 1

ИРЛАНДИИ РЕБЕНОК МЫ СДЕЛАЛИ эТО, 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')); 

Таким образом, основная проблема заключалась в том, что я не определял «игроков» в исходном состоянии как массив. Это остановило отображение карты или функции Each от увольнения, я предполагаю, что это связано с тем, как реагирует React? Затем мне нужно было установить некоторые ключи на динамических дочерних элементах, тождество и состояние каждого дочернего элемента должны поддерживаться через проходы рендеринга.

Благодаря @yuchen для указания меня в правильном направлении.

Answer 2

Если я правильно понял ваш вопрос, ваше тело ответа может содержать несколько записей о игроках. Но ваш 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