React.js 通过数组创建循环
React.js create loop through Array
我正在尝试显示 Table 的 10 个玩家。我从 ajax 获取数据并将其作为道具传递给我的 Child.
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
。
我有点不确定发生了什么,我的控制台日志显示了正确的数据,但不知何故我无法在 return.
中访问它
我错过了什么?
在 CurrentGame
组件中,您需要更改初始状态,因为您正在尝试对 participants
使用循环,但此 属性 是 undefined
,这就是您出错的原因。,
getInitialState: function(){
return {
data: {
participants: []
}
};
},
此外,由于 .map
中的 player
是 Object
,您应该从中获取属性
this.props.data.participants.map(function(player) {
return <li key={player.championId}>{player.summonerName}</li>
// -------------------^^^^^^^^^^^---------^^^^^^^^^^^^^^
})
正如@Alexander 所解决的那样,问题是异步数据加载之一 - 您正在立即呈现并且在异步 ajax 调用解决并使用 data
填充之前不会加载参与者=12=].
他们提供的解决方案的替代方案是在参与者存在之前阻止渲染,如下所示:
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>
);
}
你可以在像
这样的映射之前简单地做条件检查
{Array.isArray(this.props.data.participants) && this.props.data.participants.map(function(player) {
return <li key={player.championId}>{player.summonerName}</li>
})
}
现在 .map 可以通过两种不同的方式完成,但仍然需要条件检查,例如
.map 与 return
{Array.isArray(this.props.data.participants) && this.props.data.participants.map(player => {
return <li key={player.championId}>{player.summonerName}</li>
})
}
.map 没有 return
{Array.isArray(this.props.data.participants) && this.props.data.participants.map(player => (
return <li key={player.championId}>{player.summonerName}</li>
))
}
以上两个功能的作用相同
我正在尝试显示 Table 的 10 个玩家。我从 ajax 获取数据并将其作为道具传递给我的 Child.
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
。
我有点不确定发生了什么,我的控制台日志显示了正确的数据,但不知何故我无法在 return.
中访问它我错过了什么?
在 CurrentGame
组件中,您需要更改初始状态,因为您正在尝试对 participants
使用循环,但此 属性 是 undefined
,这就是您出错的原因。,
getInitialState: function(){
return {
data: {
participants: []
}
};
},
此外,由于 .map
中的 player
是 Object
,您应该从中获取属性
this.props.data.participants.map(function(player) {
return <li key={player.championId}>{player.summonerName}</li>
// -------------------^^^^^^^^^^^---------^^^^^^^^^^^^^^
})
正如@Alexander 所解决的那样,问题是异步数据加载之一 - 您正在立即呈现并且在异步 ajax 调用解决并使用 data
填充之前不会加载参与者=12=].
他们提供的解决方案的替代方案是在参与者存在之前阻止渲染,如下所示:
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>
);
}
你可以在像
这样的映射之前简单地做条件检查{Array.isArray(this.props.data.participants) && this.props.data.participants.map(function(player) {
return <li key={player.championId}>{player.summonerName}</li>
})
}
现在 .map 可以通过两种不同的方式完成,但仍然需要条件检查,例如
.map 与 return
{Array.isArray(this.props.data.participants) && this.props.data.participants.map(player => {
return <li key={player.championId}>{player.summonerName}</li>
})
}
.map 没有 return
{Array.isArray(this.props.data.participants) && this.props.data.participants.map(player => (
return <li key={player.championId}>{player.summonerName}</li>
))
}
以上两个功能的作用相同