Question

有一个个人资料页面。每当我访问我的个人资料时，props.profile()都会在此处加载。它更新Redux存储，并基本上将用户添加到状态。也有一个logout按钮。注销后，它会重定向到主页，操作和reducer清除Redux状态并从localStorage删除令牌。

如果我转到个人资料页面并在载入个人资料之前注销，则即使我已经单击了logout按钮，props.profile()仍会载入。像in this image。

我认为useEffect出问题了，因为单击logout按钮时没有卸载组件。

useEffect(() => {
        props.profile();

        return;
    }, [props]);

也有一个return;，但我不确定该怎么办。

所需结果：：如果我单击注销，则希望卸载组件并清除状态。

注销操作：

export const logout = () => (dispatch) => {
    localStorage.removeItem("token");
    dispatch({
        type: LOGOUT,
    });
};

注销Reducer：

case LOGOUT:
            return {
                user: {},
                authenticated: false,
                loading: false,
                error: null,
                token: null,
            };

Answer 1

无论您的return中的useEffect是什么，您的组件始终会卸载。没有发生什么事情是在卸载时调用了。

尝试将代码更改为类似这样的内容：

useEffect(() => {
        props.profile();

        return () => props.logout(); //logout should be your redux action
    }, [props.profile, props.logout]); // Reduce triggers of this method by not leaving `props` here

与Redux反应useEffect和componentWillUnmount

1 个答案: