reactjs React应用程序中的内存泄漏

klsxnrf1  于 2023-04-11  发布在  React
关注(0)|答案(2)|浏览(237)

点击提交后,我得到了这个警告
警告:无法对未挂载的组件执行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);
        });

}

如何避免此警告?任何帮助将不胜感激。

eqqqjvef

eqqqjvef1#

props.history.push('/Dashboard')被执行时,你的组件被卸载,在你试图在这个组件上执行之后的任何事情(比如状态更新)都会导致内存泄漏。

g0czyy6m

g0czyy6m2#

我通过在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);
        });
}

相关问题