反应应用程序中的内存泄漏

Question

点击提交后我收到这个警告

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，取消 useEffect 清理函数中的所有订阅和异步任务。

这是代码

const handleSubmit = async (e) => { e.preventDefault()

    let source = axios.CancelToken.source();

    dispatch(login(email, password, source.token))
        .then(() => {
            console.log("Result from dispatch");
            props.history.push("/Dashboard");//this is line which casues a warning.
            window.location.reload();
        })
        .catch(() => {
            setLoading(false);
        });

}

如何避免这个警告？任何帮助将不胜感激。

Answer 1

当

props.history.push('/Dashboard')

被执行时，你的组件被卸载，你试图在这个组件上执行之后的任何事情（比如状态更新）都会导致内存泄漏。

Answer 2

我通过添加安装在 useEffect 中的这个变量解决了警告。 我正在检查组件是否已卸载。

const mounted = useRef(false); 

useEffect(() => {
    mounted.current = true;
    return () => { mounted.current = false; };
}, []);

const handleSubmit = async (e) => {
    e.preventDefault()
    let source = axios.CancelToken.source();

    dispatch(login(email, password, source.token))
        .then(() => {
            if (!mounted) {
                console.log("Result from dispatch");

                props.history.push("/Dashboard");
                window.location.reload();
            }

        })
        .catch(() => {
            setLoading(false);
        });
}