Reagieren Sie mit componentWillReceiveProps, um die Komponente erneut zu rendern

Question

Ich kann nicht herausfinden, wie meine Componenet-Render-Funktion bei Änderung des Werts this.props.user ausgeführt wird. Anfangs ist der Wert this.props.user Null, aber Sekunden später wird ein tatsächlicher Wert angezeigt. Unten zeige ich die Kindkomponente. Die übergeordnete Komponente ordnet den Geschäftsstatus den Props zu und übergibt sie an die untergeordnete Komponentenklasse.

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 erhält nextProps als Argument. Mit dem Code, den Sie gerade haben, setzen Sie den Benutzer einfach auf seinen aktuellen Status zurück. Sie müssen das angegebene Argument nextProps verwenden.

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> 
    ) 
    } 
}