Question

从Parent Component收到的数据可用于render()的{{1}}方法，但很明显，无法将渲染方法中的状态设置为它创造了一个无限循环。我如何从父母的道具收到的数据中Child Component？我可能错过了一些东西，但我也尝试了所有生命周期组件而没有取得多大成功。

例如，

setState()

我该怎么做？

Answer 1

您可以在构造函数中最初设置状态，然后使用生命周期方法componentWillReceiveProps。您可以在此处详细了解生命周期方法：http://busypeoples.github.io/post/react-component-lifecycle/

Answer 2

您需要使用componentWillReceiveProps()生命周期方法，只要道具值发生任何变化，就会调用它。

<强> componentWillReceiveProps()

在安装的组件之前调用componentWillReceiveProps（）收到新的道具。如果您需要更新状态以响应 prop更改（例如，重置它），您可以比较this.props 和nextProps并使用this.setState（）执行状态转换这种方法。

componentWillReceiveProps(newProps){
    /*compare new values and previous value first if they are not same then update the state*/
    if(condition)
       this.setState({users: newProps.users})
}

Answer 3

使用componentWillReceiveProps

class Child extends React.Component
{
  constructor()
  {
    super(props);
    this.state = { user: {} }
  }

  componentWillReceiveProps(nextProps){
     if(this.state.user != nextProps.user){
         this.setState({ user:nextProps.user });
     }
  }
  render()
  {
    const user = this.props.user;
    console.log(user); // --> [✓] Outputs {name: John, age: 28};
    // this.setState({ user }) // --> [✘] 

    return(
      <div></div>
    );
  }
}

如何从父组件中作为道具接收的数据设置当前组件状态？

3 个答案: