我正在尝试展示一个由10个玩家组成的表格。我通过ajax获取数据并将其作为props传递给我的子组件。
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
的错误。
我有点不确定发生了什么,我的控制台日志显示了正确的数据,但是在返回中无法访问它。
我错过了什么?