Użyj komponentu componentWillReceiveProps do ponownego renderowania komponentu

Question

Nie mogę wymyślić, jak dokonać ponownego renderowania komponentu, gdy zmieni się wartość this.props.user. Początkowo wartość this.props.user ma wartość null, ale zmienia się ona na wartość rzeczywistą po sekundach. Poniżej pokazuję element potomny. Komponent macierzysty mapuje stan sklepu na rekwizyty i przekazuję je do poniższej klasy komponentów podrzędnych.

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 otrzymuje nextProps jako argument. z kodem, który obecnie właśnie ustawiasz użytkownika z powrotem do jego obecnego stanu. Musisz podać podany argument 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> 
    ) 
    } 
}