ReactJS道具和冒泡

Question

I'm having a hard time understanding why I can't do something like this.

loadPostsFromServer: function() {
    $.ajax({
        url: '/allPosts',
        dataType: 'json',
        success: function(data) {
            console.log(data);
            this.setState({posts:data, items:data});
            //this.setState({items:data});
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(this.props.url,status, err.toString());
        }.bind(this)
    });
},

loadUserFromServer: function() {
    $.ajax({
        url: '/user',
        dataType: 'json',
        success: function(data) {
            this.setState({user:data.local});
            //console.log(this.state.user);
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(this.props.url,status, err.toString());
        }.bind(this)
    });
},

getInitialState: function() {
   return {
      posts: [],
      items: [],
      user:  []
   }
},

componentDidMount: function() {
    this.loadPostsFromServer();
    this.loadUserFromServer();

    //this.setState({items: this.state.posts}); 
    //setInterval(this.loadPostsFromServer, this.props.pollInterval);
},

render: function() {
    <div className="Posts">
        <List user={this.state.user} posts={this.state.items} />
    </div>
}

Where List can be something like this and can't do the this.props.user print

var List = React.createClass({ //has to be called list
    render: function() {
        return (
            <p>{this.props.user}</p>
            <ul>
            {
                this.props.posts.map(post){
                    return (<p>{post.title}</p>)
                })
            }
            </ul>
        )
    }
});

but can do this:

var List = React.createClass({
    render: function() {
        return (<p>{this.props.user}</p>)
    }
});

Basically I'm passing two props in my real function, and the ajax call is delivering down a array user, with user info, and array post with post info. I can display the post info fine, and the user info is complete as well, however I cannot actually display the user info received from the ajax get call. I printed out the state of the array as well and it was complete and filled. However passed down it would return messages like cannot read {this.props.user.firstName} and such, however writing it the second way and not including posts, it works fine. How can I use both props in a map function?

Answer 1

Be careful, in render function, you always need a wrap tag to make React work. You should add <div> tag to the render of List component.

var List = React.createClass({ //has to be called list
render: function() {
    return (
       <div> <-- ALWAYS HAS A WRAP TAG
        <p>{this.props.user}</p>
        <ul>
        {
            this.props.posts.map(post){
                return (<p>{post.title}</p>)
            })
        }
        </ul>

       </div>
    )
}
});

This code below works because there is <p> to wrap contents.

var List = React.createClass({
render: function() {
    return (<p> <-- WRAP TAG
          {this.props.user}
          </p>)
}
});