反应使用componentWillReceiveProps重新渲染组件

Question

我无法弄清楚如何在this.props.user的值更改时使我的组件重新渲染。最初，this.props.user的值为空，但在数秒后变为实际值。下面我显示了子组件。父组件将商店状态映射到它的道具，并将其传递给下面的子组件类。

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