子への小道具としての状態を渡すとnullが返される

Question

私は親コンポーネントを作成しAPIコールを呼び出し、オブジェクトの状態を設定します。私はこの状態を小道具として子供に渡します。これは私が子供にそれを記録慰めるときに私は、ユーザーオブジェクトのnullを取得し、これが子供である、

class Masthead extends React.Component { 

    constructor(props){ 
    super(props); 
    } 

    componentDidMount(){ 
    console.log(this.props.user); 
    } 
    render() { 
    return (  
     <div className="col-md-8"> 
     ...... 
     </div>  
    ); 
    } 
} 
Masthead.propTypes ={ 
    user: React.PropTypes.object 
}; 
export default Masthead; 

class Header extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { user: null}; 

    }//end of constructor 

    componentWillMount() { 

    getUserData(url).then((result) =>{ 
     this.setState({user : result}); 
     console.log(this.state.user); 


    }); 
    } 
    render() { 
    return (
     <div className="header"> 
     <Masthead user= {this.state.user} /> 

     </div> 
    ); 
    } 
} 
export default Header; 

親のための私のコードです。私は間違って何をしていますか？ドキュメントから

Answer 1

：

componentWillMount()が発生し、実装直前に呼び出されます。 render()の前に呼び出されるため、このメソッドの状態を設定しても再レンダリングは実行されません。

つまり、親状態がcomponentWillMount()に変更されても、子コンポーネントには影響しません。 API呼び出しをcomponentDidMount()にしてください。

Answer 2

子がDOMにマウントされた時点で、親はあなたの状態変数を更新値で設定していません。つまり、あなたのコンストラクタからまだnullです。

componentDidMount()にAPI呼び出しを配置すると、親がマウントされた後に実行され、呼び出しが戻ってきたときにsetStateが返されます。子供は新しい小道具で再レンダリングします。