将状态作为道具传递给孩子会导致null

Question

I have parent component where I make and API call and set state for an abject. Then I pass this state as props to the child. This is my code for the parent,

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;

This is the child,

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;

I get null for the user object when I console log it in the child. What am I doing wrong?

Answer 1

From the docs:

componentWillMount() is invoked immediately before mounting occurs. It is called before render() , therefore setting state in this method will not trigger a re-rendering.

In other words - even if the parent state will change in componentWillMount() , it won't affect children components. Try to make your API call in componentDidMount() .

Answer 2

At the time that the child is mounted to the DOM, the parent hasn't set your state variable with the updated value, ie it's still null from your constructor.

Placing your API call into componentDidMount() will run it after the parent has mounted, and then when the call comes back and you setState , your child will re-render with the new prop.