我正在尝试将表示性组件与容器组件分开。我有一个SitesTable
和一个SitesTableContainer
。容器负责触发redux操作,以根据当前用户获取适当的网站。
问题是在最初呈现容器组件之后,异步获取了当前用户。这意味着容器组件不知道它需要重新执行其componentDidMount
函数中的代码,该代码将更新数据以发送到SitesTable
。我想我需要在其props(user)之一更改时重新渲染容器组件。如何正确执行此操作?
class SitesTableContainer extends React.Component {
static get propTypes() {
return {
sites: React.PropTypes.object,
user: React.PropTypes.object,
isManager: React.PropTypes.boolean
}
}
componentDidMount() {
if (this.props.isManager) {
this.props.dispatch(actions.fetchAllSites())
} else {
const currentUserId = this.props.user.get('id')
this.props.dispatch(actions.fetchUsersSites(currentUserId))
}
}
render() {
return <SitesTable sites={this.props.sites}/>
}
}
function mapStateToProps(state) {
const user = userUtils.getCurrentUser(state)
return {
sites: state.get('sites'),
user,
isManager: userUtils.isManager(user)
}
}
export default connect(mapStateToProps)(SitesTableContainer);
以下是一种易于使用的方法,道具更新后,它将自动重新渲染组件: