React use componentWillReceiveProps для повторной обработки компонента

Question

Я не могу понять, как сделать мой компонентный повторный рендер при изменении значения this.props.user. Первоначально значение this.props.user имеет значение null, но оно изменяется на фактическое значение через секунду после. Ниже я показываю дочерний компонент. Родительский компонент отображает состояние хранилища на его реквизит, и я передаю его классу дочерних компонентов ниже.

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

    componentWillReceiveProps(){ 
    this.setState({user: this.props.user}) 
    } 

    render() { 
    if(this.state.user) 
    return (
     <h1>{this.state.user.firstName}</h1> 
    ); 

    return (
     <h1>loading</h1> 
    ) 
    } 
} 

Answer 1

componentWillReceiveProps получает nextProps в качестве аргумента. с кодом, который вы сейчас используете, вы просто устанавливаете пользователя обратно в его текущее состояние. Вы должны использовать аргумент nextProps.

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

    componentWillReceiveProps(nextProps){ 
    this.setState({user: nextProps.user}) 
    } 

    render() { 
    if(this.state.user) 
    return (
     <h1>{this.state.user.firstName}</h1> 
    ); 

    return (
     <h1>loading</h1> 
    ) 
    } 
}