如何避免在每次派遣时反应组件安装?

时间:2019-06-22 07:04:08

标签: reactjs react-router

我使用的是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;

我希望即使在主要状态下更新数据,该组件也应仅重新呈现而不应该重新安装。请帮助我解决这个问题。

0 个答案:

没有答案