Question

我在其中创建父组件和API调用并为abject设置状态。然后我把这个状态作为道具传给了孩子。这是我父母的代码，

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;

这是孩子，

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;

当我将控制台登录到子级时，我得到null用户对象。我做错了什么？

Answer 1

来自文档：

在安装发生之前立即调用

componentWillMount()。它在render()之前调用，因此在此方法中设置状态不会触发重新呈现。

换句话说 - 即使父状态在componentWillMount()中发生变化，它也不会影响子组件。尝试在componentDidMount()。

中进行API调用

Answer 2

在将子项挂载到DOM时，父项没有使用更新的值设置状态变量，即它仍然是构造函数的空值。

将您的API调用放入componentDidMount()将在父项已挂载后运行，然后当调用回来并且您setState时，您的孩子将使用新道具重新呈现。

将状态作为道具传递给子项给出null

2 个答案: