避免更新未安装的组件

Question

我阅读了很多类似的问题，但我的问题似乎有些不同。
我正在尝试登录，但出现以下错误。

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

我附上了处理所有逻辑的 AuthContext.js，希望你能解释我哪里出了问题，以及它表明我需要学习什么知识。

import React, { useContext, useState } from 'react'
import {postData} from '../adapters/authAdapter';

const AuthContext = React.createContext();

export function useAuth() {
    return useContext(AuthContext);
}

export function AuthProvider({children}) {
    const [currentUser,setCurrentUser] = useState(null);

    async function login(email,password) {
        const adaptedRes = await postData('log-in',{email,password});
        if(adaptedRes.err) {
        throw new Error(adaptedRes.message)
        } else {
        return setCurrentUser(adaptedRes.data);
        }
    }

    const value = {
        currentUser,
        login
    };

    return (
        <AuthContext.Provider value={value}>
            {children}
        </AuthContext.Provider>
    )
}

提前谢谢你

Answer 1

该错误表示您的setCurrentUser() 函数正在被调用，而AuthProvider 当前不是mounted。这就是为什么，使用useRef() 检查您的AuthProvider 是否为mounted，然后按照链接中的说明设置状态：

export function AuthProvider({children}) {
    const [currentUser,setCurrentUser] = useState(null);
    const isMounted = useRef(false);

    useEffect(() => {
        // Becomes true on component mount
        isMounted.current = true;
         
        // becomes false on unmount
        return () => {isMounted.current = false;}
    
    
    }, [])

    async function login(email,password) {
        const adaptedRes = await postData('log-in',{email,password});
        if(adaptedRes.err) {
        throw new Error(adaptedRes.message)
        } else {
            if(!isMounted.current) {
            // Check if component is mounted
            console.log('component is not mounted');
            return;
        }
        return setCurrentUser(adaptedRes.data);
        }
    }

    const value = {
        currentUser,
        login
    };

    return (
        <AuthContext.Provider value={value}>
            {children}
        </AuthContext.Provider>
    )
}

更新正如 Drew 指出的：

问题正如其他人所说，在调用 setCurrentUser 之前正在卸载 AuthProvider 组件。与其使用创可贴修复来阻止状态更新，不如找出未安装身份验证提供程序的原因。这是您通常希望包装整个应用程序并始终挂载的提供程序组件之一。我的猜测是，您已将该身份验证提供程序的范围缩小到仅围绕您的身份验证组件 UI，然后您在其他地方导航并且该提供程序不再可用。

所以，你也应该检查一下，如果你收到这个错误，那么某处存在实现问题。