Question

我有以下组件代码：

var Answer = React.createClass({

  getInitialState: function(){
        return { comments: []}
  },

  componentWillMount: function(){
        $.ajax({
            context: this,
            method: 'GET',
            url: '/answers/' + this.props.answer.id + '/comments',
            success: function(data){
                this.setState({comments: data});
            }
        });
},

  render: function(){
        return ( 
            <div>
                <Comments comments={this.state.comments} />
            </div>
        );
},

注意我如何在componentWillMount中获取新状态，然后将此新状态作为props传递给Comments组件。我期待setState componentWillMount Comments，Comments组件会更新我的componentWillReceiveProps: function(newProps){ this.setState({comments: newProps.comments}) },组件并传递新道具，但事实证明，我需要在{{1}}中使用此方法1}}组件：

{{1}}

有人可以解释一下为什么当我设置了paren的状态后，我的父组件没有更新传递给它的子组件的道具？

Answer 1

这是因为您正在通过传递的道具初始化Comments组件中的状态。初始化在父组件中更改的子组件中的状态将不会重新运行子组件中的初始化代码。我希望您的Comments组件getInitialState方法看起来像这样

getInitialState: function(){
  return { comments: this.props.comments}
},

此方法仅在Comments初始化时调用一次，因此当您传递新道具时，除非您使用Comments，否则不会将评论设置为componentWillReceiveProps组件中的新评论。如果与孩子提供的内容相同，您不应该在孩子身上建立新的州。

如果状态仅由答案管理，则删除Comments组件中的评论状态，并仅将其用作Comments中的道具。

为什么在这种情况下我需要componentWillReceiveProps？

1 个答案: