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

Question

I am passing a meteor collection as a prop in one of my components and trying to figure it out when do I actually receive props?

I tried accessing (for eg this.props.userData ) the props in getInitialState is says undefined, then I tried accessing it in componentDidMount it says undefined, but in render method it works fine.

Which method before or after render can tell me that I have access to props? I want to initialize the state with the values props will have.

for example in the code below I get an error saying that userData is undefined.

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

Edit So I am doing something like this, I am using props just to initialize the state variable.

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

The component receives the initial properties immediately on instantiation. Actually it is the first argument of the constructor:

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

  componentWillReceiveProps (nextProps) {
    // properties changed   
  }
}

In your case my best guess is that the parent component does not yet have your property ready. You can track the passed property by observing them in the constructor and in a componentWillReceiveProps(nextProps) function.

Answer 2

Meteor synchronises user data just like any other collection with the server. It means that initially Meteor.user() will return undefined, and your component doesn't receive the prop. Later when the user document is updated, your component's props are updated, too. You can catch this event by implementing function componentWillReceiveProps(newProps) {...} .