URL更改時的更新狀態還原反應

Question

我有一個顯示用戶配置文件的Profile組件。在路線改變user/:userId的userId查詢參數將在ownProps由於更新到react-router-redux和將被傳遞到我的演示組件：

const mapStateToProps = (state, ownProps) => ({ 
    userId: ownProps.params.userId, 
    user: store.profile.user //null at first, will be updated later 
}) 

在這一點上，我需要從userId獲取用戶配置文件。我應該在哪裏抓取？目前，我在componentDidMount

componentDidMount() { 
    this.props.fetchProfile(this.props.userId) //this will dispatch an action to fetch user details and store in `store.profile.user` 
} 

做它的這種方法的缺點是，如果用戶從去到/users/1/users/2，componentDidMount不會觸發。這應該怎麼做？

Answer 1

您還需要從組件的componentDidUpdate方法中調用this.props.fetchProfile，並用（可選）附加檢查來查看userId是否實際更改。更好的是，例如，如果userId爲空，那麼您應該使用單獨的方法將fetchProfile的呼叫包裝起來，以防萬一您想跳過呼叫。

fetchProfile() { 
    this.props.userId && this.props.fetchProfile(this.props.userId) 
} 

componentDidMount() { 
    this.fetchProfile() 
} 

componentDidUpdate (prevProps) { 
    prevProps.userId !== this.props.userId && this.fetchProfile() 
}