无法读取reactjs中getInitialState中的props数据对象和子组件中的ComponentDidMount

Question

下面是我试用过的一小段代码：

var CommentBox = React.createClass({
        loadCommentsFromServer: function () {
            $.ajax({
                url: this.props.url,
                dataType: 'json',
                type: 'GET',
                success: function (data) {
                    this.setState({data: data});
                }.bind(this),
                error: function (xhr, status, err) {
                    console.error(this.props.url, status, err.toString());
                }.bind(this),
                cache: false
            });
        },
        getInitialState: function () {
            return {data: []};
        },
        componentDidMount: function () {
            this.loadCommentsFromServer();
        },
        render: function () {
            return (
                    <div className="commentBox">
                        <MessageBox1 data={this.state.data}/>
                    </div>
            );
        }
    });

    var MessageBox1 = React.createClass({
        getInitialState: function() {
            alert('MessageBox1 getInitialState');
            return {nameWithQualifier: 'Mr. ' + this.props.data.pageName};
        },
        componentDidMount: function() {
            alert('this.props.data: ' + this.props.data);
        },
        render: function() {
            return (<div>
                        <div>{this.state.nameWithQualifier}</div>
                        <div> {this.props.data.pageName}</div>
                    </div>
            );
        }
    });

ReactDOM.render(<CommentBox url="/save/6"/>, document.getElementById('content'));

在CommentBox中，我查询一个ID为6的对象，并将其传递给MessageBox1组件。我想让这个对象成为MessageBox1组件中的状态变量。这里的问题是，我无法读取props变量。“this.props.data”在MessageBox1组件的getInitialState和ComponentDidMount中未定义。然而，在render函数中，我可以看到正确的值。我尝试过几个能够读取GetInitialState中的props数据的示例。为什么这里没有发生这种事？请帮忙。我在控制台没有任何错误。

Answer 1

我相信您对react组件的生命周期有些困惑。

我建议快速阅读本文，以了解何时调用每个生命周期方法。http://busypeoples.github.io/post/react-component-lifecycle/

在getInitialState方法的messagebox1中，像这样初始化状态结构，以防止在道具可用之前访问它们。

{ nameWithQualifier: '' }

componentWillReceiveProps(newProps) {
    this.setState({ nameWithQualifier: 'Mr. ' + newProps.data.pageName })
}

componentWillMount() {
    this.setState({ nameWithQualifier: 'Mr. ' + this.props.data.pageName })
}

所以如果你真的想这么做，我推荐上面的2个建议

1. 在componentWillMount中调用ajax请求，以获取更早发送的请求
2. 在componentWillReceiveProps上更新子组件中的状态（每次更新道具时都会更新您的状态）

然而，在大多数情况下，用它的道具设置组件状态似乎没有必要。也许可以试试这样的方法：

   render: function () {
        return (
                <div className="commentBox">
                    <MessageBox1 pageName={this.state.data.pageName}/>
                </div>
        );
    }

    render: function() {
        return (<div>
                    <div>{'Mr. ' + this.props.pageName}</div>
                    <div> {this.props.pageName}</div>
                </div>
        );
    }