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