反応クラスの小道具はいつ入手できますか？

Question

流星群を私のコンポーネントの1つの支柱として渡していて、いつ実際に小道具を受け取るのか把握しようとしていますか？

私はgetInitialStateに（例えばthis.props.userData用）小道具をされたアクセスは未定義と言う試みたが、その後、私はcomponentDidMountでそれにアクセスしてみました、それは未定義と言いますが、renderメソッドではそれが正常に動作します。

renderの前後のどの方法で、私は小道具にアクセスできますか？私は、小道具の持つ価値を使って状態を初期化したいと思います。

たとえば、以下のコードでは、userDataが定義されていないというエラーが表示されます。

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

編集 だから私はこのような何かをやっている、私はちょうど状態変数を初期化するために小道具を使用しています。

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は、他のコレクションと同様にユーザーデータをサーバーと同期させます。これは、最初にMeteor.user()が未定義を返し、コンポーネントがプロップを受け取らないことを意味します。後でユーザー文書が更新されると、コンポーネントの小道具も更新されます。 function componentWillReceiveProps(newProps) {...}を実装すると、このイベントをキャッチできます。