无法在React.js中获取嵌套数组的属性'映射'

问题描述：

我遇到了映射React.js中的数组的问题。下面是代码我工作的片段：无法在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。先谢谢你。

您是否收到任何错误？ –

是的：无法获取未定义或空引用的属性“映射” –

“characterService”的声明在哪里？ –

答

所以我把重点放在有关的特殊动作没有上榜做了点评@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> 
    ); 
} 
});

谢谢大家的帮助，希望这个答案对其他人来说已经够清楚了。

答

的问题是在这条线：

<MoveListComponent moveset={this.state.character.special_moves} />

字符的object的array，使访问任何object的special_moves，你还需要指定索引，使用：

<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"} 
     ], 
    },{...} 
]

检查工作代码：

var 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"} 
 
]; 
 

 

 
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: characters}; 
 
    }, 
 

 
    render: function() { 
 
    return (
 
     <div> 
 
      <h2>Special Moves</h2> 
 
      <p>{this.state.character[0].tagline}</p> 
 
      { 
 
      this.state.character.map((item, i) => { 
 
       return <MoveListComponent moveset={item.special_moves} /> 
 
      }) 
 
      } 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 

 
ReactDOM.render(<CharacterPage/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>

是的，我得到了一个语法错误。设置索引来获取special_moves对我来说不起作用。应该在CharacterPage类中还是在MoveListComponent类中映射moveset？ –

什么是直接使用索引时的错误？map你需要同时使用这个地方，当你在CharacterPage页面中使用地图时，它会迭代数组字符并发送每个special_moves到MoveListComponent组件，现在你需要在MoveListComponent中再次使用map来迭代special_moves数组。 –

在你的代码中有一个问题，你将变量的初始值设置为'{}'，而不是将它设置为'[]'，如下所示：'return {character：[]};' –

无法在React.js中获取嵌套数组的属性'映射'

相关推荐