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

Question

从Parent Component收到的数据可用于Child Component的render()方法中，但很明显，无法在render方法中设置状态，因为它会创建无限循环。来自父母道具收到的数据如何setState()？我可能错过了一些东西，但我也尝试了所有的生命周期组件，但没有取得太大的成功。

例如，

import React from 'react'; 

class Parent extends React.Component 
{ 
    render() 
    { 
    let user = {name: John, age: 28}; 
    return(
     <Child user={user}> 
    ); 
    } 
} 

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

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

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

我该怎么办呢？

Answer 1

使用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> 
    ); 
    } 
} 

Answer 2

您可以先在构造函数中设置状态，然后使用生命周期方法componentWillReceiveProps。您可以在这里阅读更多有关生命周期方法的信息：http://busypeoples.github.io/post/react-component-lifecycle/

Answer 3

您需要使用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}) 
}