Question

在子组件中，我正在调用API，然后推送到其他路由，这会导致App组件重新呈现，因为其位置属性键（location.key）不断变化，导致子组件继续重新安装（我知道重新渲染父对象应该只重新渲染孩子而不是重新安装它，但这就是当我尝试将空数组传递给useEffect，useEffect(() => {}, []);

我可以通过shouldComponenUpdate阻止应用重新渲染，并且仅在location.pathname更改而不是键更改时更新它，而是有更好的方法吗？

Parent.js

constructor(props) {
    super(props);
    const {
           ....,
           ....,
           location,
          }= props;
    if (props.location.pathname.includes('/x');
    push('/x');
}

shouldComponentUpdate(nextProps, nextState) {
    if (
      this.props.location.pathname !== nextProps.location.pathname ||
      this.state.match.path !== nextState.match.path
    ) {
      return true;
    }
    return false;
}

render() {
    <Child/>
}

Child.js

useEffect(() => {
    if (Y.ID) {
      fetchYDetails();
    }
}, [fetchYDetails, Y.ID]);

Model.js

effects: dispatch => ({
    fetchYDetails() {
        const response = await request({ ...});
        if (!response.error) {
            dispatch(push('/z'));
        };
    }
});

谢谢！

由于滥用ReactJS Router而导致无限循环，useEffect钩子

0 个答案: