Я пытаюсь отобразить таблицу из 10 игроков. Я получаю данные через ajax и передаю его в качестве реквизита для моего ребенка.
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>
);
}
});
Теперь мне нужен компонент списка для рендеринга игроков:
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>
)
}
});
Что дает мне Uncaught TypeError: Cannot read property 'map' of undefined
.
Я как бы не уверен, что происходит, в моем консольном журнале отображаются правильные данные, но каким-то образом я не могу получить к нему доступ в обратном порядке.
Что мне не хватает?