React.js create loop through Array

J'essaie d'afficher une table de 10 joueurs. Je reçois les données de via ajax et je les passe comme des accessoires à mon enfant.

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

Maintenant, j'ai besoin d'un composant de liste pour rendre les joueurs:

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

Ce qui me donne un Uncaught TypeError: Cannot read property 'map' of undefined .

Je ne doute pas de ce qui se passe, mon journal de la console affiche les données correctes, mais d'une certaine manière, je ne peux pas y accéder dans le retour.

Qu'est-ce qui me manque?

Dans le composant CurrentGame , vous devez modifier l'état initial car vous essayez d'utiliser une boucle pour les participants mais cette propriété est undefined c'est pourquoi vous obtenez une erreur.

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

Aussi, en tant que player dans .map is Object vous devriez en obtenir des propriétés

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

Example

Comme @Alexander résout, le problème est celui de la charge de données asynchrones – vous rendez immédiatement et vous ne pouvez (probablement pas) avoir les participants chargés.

L'alternative à la solution qu'ils ont fournie serait d'empêcher le rendu jusqu'à ce que les participants existent, quelque chose comme ceci:

  render: function() { if (!this.props.data.participants) { return null; } 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> ); }