我什么时候可以使用react类中的道具？

Question

我正在将流星集合作为道具传递到我的一个组件中，并试图弄清楚何时真正收到道具？

我尝试访问（例如this.props.userData ） getInitialState的props表示未定义，然后尝试在componentDidMount中访问其表示未定义的道具，但是在render方法中它可以正常工作。

render之前或之后的哪种方法可以告诉我可以使用道具？ 我想使用props将具有的值来初始化状态。

例如，在下面的代码中，我收到一条错误消息，提示未定义userData。

getInitialState(){
    return{
        firstName : this.props.userData.firstName
    }
}

编辑所以我正在做这样的事情，我只是在使用props来初始化状态变量。

export default React.createClass({
    getInitialState(){
        return {
            email : this.props.user.email
        }
    },

    onFormSubmit(event){
        event.preventDefault();
    },

    onTextFieldChange(event){

        switch (event.target.name) {
            case "email":
                this.setState({
                    email:event.target.value
                });
                break;
        }

    },

    render() {
        console.log(this.props.user.email);
        return (
            <div className="panel panel-default">
                <div className="panel-heading">
                    <h3 className="panel-title text-center"><strong>Sign in with Existing Account</strong></h3>
                </div>
                <form className="form-horizontal" id="frmSignIn" role="form" onSubmit={this.onFormSubmit}>
                    <div className="modal-body">
                        <div className="form-group">
                            <label className="col-xs-4 control-label">Email</label>
                            <div className="col-xs-8">
                                <input type="email" id="email" name="email" className="form-control"
                                    value={this.state.email}
                                    onChange={this.onTextFieldChange}
                                    placeholder="example@domain.com"
                                    required/>
                            </div>
                        </div>
                        <div className="form-group">
                            <label className="col-xs-4 control-label">Password</label>
                            <div className="col-xs-8">
                                <input type="password" id="password" name="password" className="form-control"
                                placeholder="Password"
                                required/>
                                <label id="signin-error" className="error"> </label>
                            </div>
                        </div>
                    </div>
                    <div className="panel-footer">
                        <label className="col-xs-4 control-label"></label>
                        <div className="col-xs-8">
                            <input type="submit" className="btn btn-primary pull-right" value="SignIn"/>
                        </div>
                    </div>
                </form>
            </div>
        );
    }
});

Answer 1

该组件在实例化后立即接收初始属性。 实际上，这是构造函数的第一个参数：

class MyComp extends React.Component {
  constructor (props) {
    super(props)
    // do something with props
  }

  componentWillReceiveProps (nextProps) {
    // properties changed   
  }
}

在您的情况下，我最好的猜测是父组件尚未准备好您的属性。 您可以通过在构造函数和componentWillReceiveProps(nextProps)函数中观察传递的属性来跟踪它们。

Answer 2

流星与其他任何集合一样，与服务器同步用户数据。 这意味着最初Meteor.user()将返回未定义，并且您的组件不接收该道具。 稍后，当用户文档更新时，组件的属性也将更新。 您可以通过实现function componentWillReceiveProps(newProps) {...}来捕获此事件。