Question

我很难理解为什么我不能做这样的事情。

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

List可以是这样的，不能执行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>
        )
    }
});

但可以这样做：

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

基本上我在我的真实函数中传递了两个道具，而ajax调用正在传递一个数组用户，包含用户信息，以及包含帖子信息的数组帖子。我可以显示帖子信息，并且用户信息也完整，但我实际上无法显示从ajax get call收到的用户信息。我也打印出阵列的状态，它已经完成并填满了。传递下去它将返回无法读取{this.props.user.firstName}之类的消息等，但是以第二种方式编写它而不包括帖子，它工作正常。如何在地图功能中使用两个道具？

Answer 1

注意，在渲染功能中，总是需要一个换行标记来使React工作。您应该将<div>标记添加到render组件的List。

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

以下代码有效，因为有<p>来包装内容。

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

ReactJS道具和冒泡

1 个答案: