React内存泄漏，清理useEffect

Question

我正在开发一个项目，遇到了这个错误 （“无法对已卸载的组件执行 React 状态更新。这是一个无操作，但它表明应用程序中存在内存泄漏。要修复此问题，请取消 useEffect 清理函数中的所有订阅和异步任务。） 我怎样才能解决这个问题。 这是我的代码。

export default function Controllers() {
    const [initialState, setInitialState] = useState<PageState>({ controllers: [] });
    const [showModal, setShowModal] = useState<Boolean>(false);
    const [existing, setExisting] = useState<IController>();

    useEffect(() => {
        let isMounted = true;
        if(isMounted){
            let setState = async () => {
                const controllers = await Api.controllerList();
                setInitialState({ controllers });
            };  
            setState();  
        }

        return () => { isMounted = false; };
    }, [ initialState ]);
}

我尝试了 isMounted 的方法，但我不确定我是否做对了。

Answer 1

useEffect

在 React 中的挂载上运行。所以你不必指定变量

isMounted

来检查组件是否已安装。阅读更多这里。

我会重写你的代码，使其看起来更像：

export default function Controllers() {
    const [controllers, setControllers] = useState<Controller[]>([]);
    // For your `useState` type above, I'm not sure what type you're using so I'm assuming there's a type called `Controller`

    useEffect(() => {
        const fetchData = async () => {
            const controllers = await Api.controllerList();
            setControllers(controllers);
        };  
        fetchData();  

    }, []); // This is the dependency array of useEffect
}

在依赖项数组中，您可以将其保留为空，以便

useEffect

只会在挂载时触发一次（如果您处于开发阶段并且启用了严格模式，则触发两次）。

如果使用错误，依赖数组是非常危险的。就像在您的代码中一样，您将

initialState

作为依赖项，但在

useEffect

内部，您使用

initialState

设置

setInitialState

的状态。这将导致您的

useEffect

中无限循环触发。请阅读我上面给您的关于

useEffect

的链接。