React use componentWillReceiveProps để tái render thành phần

Question

Tôi không thể tìm ra cách làm cho componenet của tôi tái xuất hiện khi giá trị của this.props.user thay đổi. Ban đầu giá trị của this.props.user là null nhưng nó thay đổi thành giá trị thực sau vài giây. Dưới đây tôi đang hiển thị thành phần con. Thành phần cha mẹ ánh xạ trạng thái cửa hàng đến các đạo cụ của nó và tôi chuyển nó tới lớp thành phần con bên dưới.

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 nhận được nextProps làm đối số. với mã bạn hiện đang có bạn chỉ cần thiết lập người dùng trở lại trạng thái hiện tại của nó. Bạn cần sử dụng đối số nextProps được cung cấp.

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