我在React.js中映射数组时遇到问题。以下是我正在处理的代码片段：
var MoveListItemComponent = React.createClass({
render: function () {
return (
<div className="move_list_item">
<p className="character_list_item_country">{this.props.move.move_name}</p>
</div>
);
}
});
var MoveListComponent = React.createClass({
render: function(){
var moves = this.props.moveset.map(function(move){
return(
<MoveListItemComponent key={move.move_name} move={move} />
);
});
return (
<div>
{moves}
</div>
);
}
});
var CharacterPage = React.createClass({
getInitialState: function() {
return {character: {}};
},
componentDidMount: function() {
this.props.service.findById(this.props.characterId).done(function(result) {
this.setState({character: result});
}.bind(this));
},
render: function () {
return (
<div>
<HeaderComponent text="Character Details"/>
<div>
<div className="charcater_page_top_info">
<img className="character_page_icon" src={this.state.character.icon} />
<div className="character_page_info">
<h3 className="character_page_name">{this.state.character.name}</h3>
<p className="character_page_country">{this.state.character.country}</p>
</div>
</div>
<p className="character_page_tagline"><i>{this.state.character.tagline}</i></p>
<div className="character_page_stats">
</div>
<div>
<h2>Special Moves</h2>
<p>{this.state.character.tagline}</p>
<MoveListComponent moveset={this.state.character.special_moves} />
</div>
</div>
</div>
);
}
});
我访问的数据是：
characters = [
{"id": 1, "name": 'Ryu', "country": 'Japan', "tagline":"You must defeat Sheng Long to stand a chance.", "stats":{"power": 7, "speed": 7, "jump": 7, "range": 7}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/3/37/Portrait_SF2_Ryu.png', "character_list_item_backgroundcolor": "#ff9b9b"},
{"id": 2, "name": 'E. Honda', "country": 'Japan', "tagline":"Can't you do better than that?", "stats":{"power": 9, "speed": 6, "jump": 6, "range": 7}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/5/5a/Portrait_SF2_EHonda.png', "character_list_item_backgroundcolor": "#9bb9ff"},
{"id": 3, "name": 'Blanka', "country": 'Brazil', "tagline":"Seeing you in action is a joke.", "stats":{"power": 7, "speed": 6, "jump": 6, "range": 7}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/a/ad/Portrait_SF2_Blanka.png', "character_list_item_backgroundcolor": "#a4cc9b"},
{"id": 4, "name": 'Guile', "country": 'USA', "tagline":"Go home and be a family man.", "stats":{"power": 8, "speed": 8, "jump": 7, "range": 8}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/4/4e/Portrait_SF2_Guile.png', "character_list_item_backgroundcolor": "#f3ff8e"},
{"id": 5, "name": 'Ken', "country": 'USA', "tagline":"Attack me if you dare, I will crush you.", "stats":{"power": 7, "speed": 7, "jump": 7, "range": 7}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/5/50/Portrait_SF2_Ken.png', "character_list_item_backgroundcolor": "#ff8466"},
{"id": 6, "name": 'Chun Li', "country": 'China', "tagline":"I'm the strongest woman in the world.", "stats":{"power": 6, "speed": 9, "jump": 9, "range": 7}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/e/e2/Portrait_SF2_ChunLi.png', "character_list_item_backgroundcolor": "#6670ff"},
{"id": 7, "name": 'Zangief', "country": 'USSR', "tagline":"My strength is much greater than yours.", "stats":{"power": 7, "speed": 5, "jump": 4, "range": 4}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/8/81/Portrait_SF2_Zangief.png', "character_list_item_backgroundcolor": "#ffa551"},
{"id": 8, "name": 'Dhalsim', "country": 'India', "tagline":"I will meditate and then destroy you.", "stats":{"power": 5, "speed": 4, "jump": 6, "range": 10}, "special_moves":[{"move_name":"amove", "thesteps":"left, left, up"}, {"move_name":"asecondmove", "thesteps":"left, right, punch"}], "icon":'https://cdn.wikimg.net/strategywiki/images/8/88/Portrait_SF2_Dhalsim.png', "character_list_item_backgroundcolor": "#ffea51"}
];
所以除了MoveListComponent之外，一切都很好。我很确定问题是它在MoveListComponent类中的映射方式，我只是不知道到底出了什么问题。我使用相同的方法来渲染所有角色的列表，这对我来说很有效。我错过了对特殊动作列表的引用吗？
我的完整代码可以在https://github.com/ChoragosDesigns/ChoragosDesigns.github.io看到。提前谢谢。
答案 0 :(得分：0)
问题出在这一行：
<MoveListComponent moveset={this.state.character.special_moves} />
字符是array的{{1}}，因此要访问任何object的{{1}}，您还需要指定索引，请使用：
special_moves或者对此使用object，如下所示：
<MoveListComponent moveset={this.state.character[0].special_moves} />
检查字符数组：
map检查工作代码：
{
this.state.character.map( (item, i) => {
return <MoveListComponent moveset={item.special_moves} />
})
}
character = [
{...
"special_moves": [
{"move_name":"amove", "thesteps":"left, left, up"},
{"move_name":"asecondmove", "thesteps":"left, right, punch"}
],
},{...}
]
答案 1 :(得分：0)
所以我专注于@elmeister关于尚未制作的特殊动作列表的评论。所以我决定保持我的映射方式几乎相同，然后在最终组件的渲染中，我将SpecialMovesListComponent放在变量中。
var SpecialMoveComponent = React.createClass({
render: function(){
return(
<div>
<h3 className="character_page_move_name">{this.props.move.move_name}</h3>
<p className="character_page_move_steps"><i>{this.props.move.move_steps}</i></p>
</div>
);
}
});
var SpecialMoveListComponent = React.createClass({
render: function(){
var special_moves = this.props.moves.map(function(move){
return(
<SpecialMoveComponent move={move} />
);
});
return(
<div className="special_move_list">
{special_moves}
</div>
);
}
});
var CharacterPage = React.createClass({
getInitialState: function() {
return {character: {}};
},
componentDidMount: function() {
this.props.service.findById(this.props.characterId).done(function(result) {
this.setState({character: result});
}.bind(this));
},
render: function () {
var special_move_list_component = "";
//---When this component is mounted (or rendered) the special_moves isn't quite ready to exist. So first
// I check if it is ready, then render the component that handles the mapping, and put that in a variable
// which is called in this component's return
if(this.state.character.special_moves)
{
special_move_list_component = <SpecialMoveListComponent moves={this.state.character.special_moves} />;
}
return (
<div>
<HeaderComponent text="Character Details"/>
<div>
<div className="charcater_page_top_info">
<img className="character_page_icon" src={this.state.character.icon} />
<div className="character_page_info">
<h3 className="character_page_name">{this.state.character.name}</h3>
<p className="character_page_country">{this.state.character.country}</p>
</div>
</div>
<p className="character_page_tagline"><i>{this.state.character.tagline}</i></p>
<h2 className="section_title">Special Moves</h2>
{special_move_list_component}
</div>
</div>
);
}
});
感谢大家的帮助，希望这个答案对其他人来说足够清楚。