React.js No-op in component？

Question

我相信no-op来自我的useEffect，所以我试图实现一个清理。然而，我仍然有关于no-op的问题。这是错误：

无法对已卸载的组件执行React状态更新。这是一个no-op，但它表明您的应用程序中存在内存泄漏。要修复此问题，请在useEffect清理函数中取消所有订阅和异步任务。在div (由ForwardRef(栅格)创建)中的ExportFormats (由父级创建)中，在ForwardRef(栅格)(由WithStyles(ForwardRef(栅格)创建)创建)中，在WithStyles(ForwardRef(栅格))中(由父级创建)

下面是我的useEffect实现：

React.useEffect(() => {
    let isSubbed = true;
    const fetchFormats = async (subbedStatus) => {
        getEGMFormats(enums.EGM_EXPORT_FORMATS)
            .then((data) => {
                subbedStatus && setResponse(data.data);
            })
            .catch((err) => {
                subbedStatus && setErrorStatusCode(err.response.status);
            })
            .finally(() => {
                subbedStatus && setIsSubmitting(false);
            });
    };
    fetchFormats(isSubbed);
    return () => {
        cancelAxios();
        isSubbed = false;
    };
}, [setErrorStatusCode]);

正在导入cancelAxios函数调用，但它的功能如下：

导出常量cancelAxios = () => source.cancel()；

我在这里做错了什么，或者它可能在我的组件中的其他地方？这是组件中唯一的useEffect吗？

Answer 1

嗯..。您应该使用闭包中的标志变量，而不是函数参数...

React.useEffect(() => {
    let isSubbed = true;
    const fetchFormats = async () => {
        getEGMFormats(enums.EGM_EXPORT_FORMATS)
            .then((data) => {
                isSubbed&& setResponse(data.data);
            })
            .catch((err) => {
                isSubbed&& setErrorStatusCode(err.response.status);
            })
            .finally(() => {
                isSubbed&& setIsSubmitting(false);
            });
    };
    fetchFormats();
    return () => {
        cancelAxios(); // not sure what is this...
        isSubbed = false;
    };
}, [setErrorStatusCode]);