使用钩子的反应组件中的内存泄漏警告

Question

我遇到了内存泄漏问题，我在控制台中收到以下错误。

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

这是我的代码：

React.useEffect(() => {
        if (data) {
            // I am calling my fetch method
            fetch(logData)
                .then((response) => response.json())
                .then((data) => {
                    //logic
                    //setState called at end of logic
                    setData(data);
                });
        }
    }, [value);

Answer 1

也许您的组件在获取数据时由于某些交互而被卸载？比如点击关闭按钮（如果你的组件有）

为避免遇到此错误，您可以检查您的组件是否像这样安装

const isMounted = useRef(true);
useEffect(() => () => { isMounted.current = false }, [])

然后只有在组件仍然挂载时才设置状态

useEffect(() => {
    fetch(res)
        .then(res => res.json())
        .then((data) => {
            if (isMounted) {
                setState(data)
            }
        })
}, [dep])