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

Question

I'm having an issue mapping an array in React.js. Below is the snippet of code I'm working on:

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>
    );
}
});

And the data I'm accessing is:

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

So everything renders nicely except the MoveListComponent. I'm pretty sure the issue is how it is mapped in the MoveListComponent class, I just don't know exactly what is wrong. I was using the same method to render a list of the all the characters, and that worked out well for me. Am I missing a reference to the list of special moves?

My full code can be seen here https://github.com/ChoragosDesigns/ChoragosDesigns.github.io . Thank you in advance.

Answer 1

Issue is in this line:

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

character is an array of object , so to access the special_moves of any object , you need to specify the index also, use this:

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

Or use map on this, like this:

{
    this.state.character.map( (item, i) => {
        return <MoveListComponent moveset={item.special_moves} />
    })
}

Check the character array:

character = [
    {...
       "special_moves": [
               {"move_name":"amove", "thesteps":"left, left, up"},
               {"move_name":"asecondmove", "thesteps":"left, right, punch"}
       ], 
    },{...}
]

Check the working code:

 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'/> 

Answer 2

So I focused on a comment @elmeister made about the list of special moves not being made yet. So I decided to keep how I was mapping pretty much the same, and then in the rendering of the final component, I put the SpecialMovesListComponent inside a variable.

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>
    );
}
});

Thank you everyone for your help, and hopefully this answer is clear enough for others.