Javascript React.js 通过数组创建循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28320438/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React.js create loop through Array
提问by Mini John
I'm trying to display a Table of 10 Players. I get the data from via ajax and pass it as props to my Child.
我正在尝试显示一个包含 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>
);
}
});
Now I need a List Component to Render the Players:
现在我需要一个列表组件来渲染玩家：
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>
)
}
});
Which gives me a Uncaught TypeError: Cannot read property 'map' of undefined.
这给了我一个Uncaught TypeError: Cannot read property 'map' of undefined.
I'm kind of unsure what is happening, my console log displays the correct data but somehow I can't access it in the return.
我有点不确定发生了什么，我的控制台日志显示了正确的数据，但不知何故我无法在返回时访问它。
What am I missing ?
我错过了什么？
回答by Alexander T.
In CurrentGamecomponent you need to change initial state because you are trying use loop for participantsbut this property is undefinedthat's why you get error.,
在CurrentGame组件中，您需要更改初始状态，因为您正在尝试使用循环，participants但这undefined就是您出错的原因。，
getInitialState: function(){
return {
data: {
participants: []
}
};
},
also, as playerin .mapis Objectyou should get properties from it
此外，如player在.map是Object你应该从它那里得到的属性
this.props.data.participants.map(function(player) {
return <li key={player.championId}>{player.summonerName}</li>
// -------------------^^^^^^^^^^^---------^^^^^^^^^^^^^^
})
回答by Dan W
As @Alexander solves, the issue is one of async data load - you're rendering immediately and you will not have participants loaded until the async ajax call resolves and populates datawith participants.
作为@Alexander解决了，问题是异步数据加载的一个-你立即渲染，你会不会有加载，直到异步Ajax调用解析和填充参与者data用participants。
The alternative to the solution they provided would be to prevent render until participants exist, something like this:
他们提供的解决方案的替代方案是在参与者存在之前阻止渲染，如下所示：
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>
);
}
回答by Hemadri Dasari
You can simply do conditional check before doing map like
您可以在执行 map 之前简单地进行条件检查
{Array.isArray(this.props.data.participants) && this.props.data.participants.map(function(player) {
return <li key={player.championId}>{player.summonerName}</li>
})
}
Now a days .map can be done in two different ways but still the conditional check is required like
现在一天 .map 可以通过两种不同的方式完成，但仍然需要条件检查，例如
.map with return
.map 返回
{Array.isArray(this.props.data.participants) && this.props.data.participants.map(player => {
return <li key={player.championId}>{player.summonerName}</li>
})
}
.map without return
.map 不返回
{Array.isArray(this.props.data.participants) && this.props.data.participants.map(player => (
return <li key={player.championId}>{player.summonerName}</li>
))
}
both the above functionalities does the same
以上两个功能都是一样的
