使用重定向时的内存泄漏警告

Question

我使用 Firebase 通过 React 和 Redux 进行身份验证。在我使用 Redirect 之前，注册组件可以正常工作。

我在布局组件中有componentDidMount 和componentWillUnmount，并在Route App.js 中使用Redirect

如何解决内存泄漏警告问题？

布局组件

unsubscribeFromAuth = null;

componentDidMount() {
    const { setCurrentUser } = this.props;
    this.unsubscribeFromAuth = auth.onAuthStateChanged(async (userAuth) => {
        if (userAuth) {
            const userRef = await createUserProfileDocument(userAuth);

            userRef.onSnapshot((snapShot) => {
                setCurrentUser(
                    {
                        id: snapShot.id,
                        ...snapShot.data(),
                    },
                    () => {
                        console.log(this.state);
                    }
                );
            });
        }

        setCurrentUser(userAuth);
    });
}

// Close subscription
componentWillUnmount() {
    this.unsubscribeFromAuth();
}

布局组件中的 Redux

const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentUser: (user) => dispatch(setCurrentUser(user)),
    };
};

App.js

<Route
    exact
    path='/signinsignup'
    render={() =>
    currentUser ? <Redirect to='/' /> : <SignInAndSignUpPage />
    }
/>

Answer 1

您还需要取消订阅userRef.onSnapshot。

unsubscribeFromAuth = null;
unsubscribeFromOnSnapshot = null

componentDidMount() {
    const { setCurrentUser } = this.props;
    this.unsubscribeFromAuth = auth.onAuthStateChanged(async (userAuth) => {
        if (userAuth) {
            const userRef = await createUserProfileDocument(userAuth);

            this.unsubscribeFromOnSnapshot = userRef.onSnapshot((snapShot) => {
                setCurrentUser(
                    {
                        id: snapShot.id,
                        ...snapShot.data(),
                    },
                    () => {
                        console.log(this.state);
                    }
                );
            });
        }

        setCurrentUser(userAuth);
    });
}

// Close subscription
componentWillUnmount() {
    this.unsubscribeFromAuth();
    if (this.unsubscribeFromOnSnapshot) {
        this.unsubscribeFromOnSnapshot();
    }
}