我使用的是react-rematch
而不是redux
,并且每当我分派动作时,我的组件都会再次挂载,因此页面会有波动,并且每次都会被扔到页面顶部
这个问题不在每个组件中,只有当我将react-router
与它一起使用时才会存在
我的路线放置在@zippytech/react-toolkit/SplitContainer
的拆分容器中
<SplitContainer>
<SplitContainer.Side>
<Route exact path="/app/:orgId/xyz/:status/configureActivity/:xyzId" component={componentBox(ConfigureActivity)} />
</SplitContainer.Side>
</SplitContainer>
我的组件是
class ConfigureActivity extends React.Component {
constructor(props) {
super(props);
this.state = {
leafActivityError: null
}
}
async componentWillMount() {
let selectedDataById = this.props.selectedDataById;
let objValidation = Object.entries(selectedDataById).length === 0 && selectedDataById.constructor === Object;
if (objValidation) {
await dispatch.xyz.getInDesignInitiativeDetailsById(this.props.match.params.xyzId);
}
}
render(){
//It contains TreeView from "@zippytech/react-toolkit/TreeView" on clicking of each Item I am dispatching some action which updated the data In props to this component, due to which page gets remount
}
}
function mapStateToProps(state) {
return {
selectedOrganisation: state.app.selectedOrganisation,
resourcePaneFlag: state.initiatives.resourcePaneFlag,
xyzId: state.initiatives.xyzId
};
}
const connectedConfigureActivity = connect(mapStateToProps)(ConfigureActivity);
export default connectedConfigureActivity;
我希望即使在主要状态下更新数据,该组件也应仅重新呈现而不应该重新安装。请帮助我解决这个问题。