javascript - React - 无法对已卸载的组件执行 React 状态更新

Question

问候，我现在正在尝试调试一些代码，不知道如何修复我在标题中检测屏幕尺寸 View 的 useEffect。这是我在 useEffect 中遇到的错误:

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.

我的代码:

const [state, setState] = useState({
    mobileView: false,
    drawerOpen: false,
});

const { mobileView, drawerOpen } = state;

useEffect(() =>
{
    const setResponsiveness = () =>
    {
        return window.innerWidth < 1000
            ? setState((prevState) => ({ ...prevState, mobileView: true }))
            : setState((prevState) => ({ ...prevState, mobileView: false }));
    };

    setResponsiveness();

    window.addEventListener("resize", () => setResponsiveness());
}, []);

依赖项数组已经为空，但我不确定还可以放入什么？

Answer 1

导致问题的不是 useEffect，而是每当窗口大小发生变化时都会执行的窗口调整大小事件。

当您的函数安装时，您将向窗口添加 resize 事件。但是当您卸载组件时，resize 事件仍在监听，每当窗口大小发生变化时，您的 setResponsiveness 函数就会被调用。 setResponsiveness 将尝试更新已卸载组件的状态值。所以基本上你的功能组件正在泄漏内存，因为即使它已卸载 setResponsiveness 仍然作为对 window resize 事件的回调附加。

您应该始终在 componentWillUnmount 或 useEffect 返回函数中删除组件特定的事件监听器，具体取决于组件类型。

const [state, setState] = useState({
    mobileView: false,
    drawerOpen: false,
});

const { mobileView, drawerOpen } = state;

function setResponsiveness() {
    return window.innerWidth < 1000
        ? setState((prevState) => ({ ...prevState, mobileView: true }))
        : setState((prevState) => ({ ...prevState, mobileView: false }));
}

useEffect(() => {
    setResponsiveness();
    window.addEventListener("resize", setResponsiveness);
    // return a cleanup function which will remove the event listener
    return () => {
        window.removeEventListener("resize", setResponsiveness);
    };
}, []);