这节课不是很明白...context和provider的作用和区别分别是什么

来源:5-5 用useContext存储全局用户信息

甜言好厉害

2021-11-08

useAuth返回的context和 有关系吗?是说一定要在 包含内的元素,使用useAuth返回的context就是<AuthContext.Provider children={children} value={{user, login, register, logout}} />中的value吗????

const AuthContext = React.createContext<{
    user: User |null;
    login:(form:AuthForm) => Promise<void>;
    register:(form:AuthForm) => Promise<void>;
    logout:() => Promise<void>;
}|undefined>(undefined)
AuthContext.displayName = 'AuthContext'

export const AuthProvider = ({children}: {children: ReactNode}) => {
    const [user, setUser] = useState<User | null>(null)
    const login = (form: AuthForm) => auth.login(form).then(user => setUser(user))
    const register = (form: AuthForm) => auth.register(form).then(user => setUser(user))
    const logout = () => auth.logout().then(() => setUser(null))

    return <AuthContext.Provider children={children} value={{user, login, register, logout}} />
}

export const useAuth = () => {
    const context = React.useContext(AuthContext)
    if(!context){
        throw new Error('useAuth必须在AuthProvider中使用')
    }
    return context
}
    
写回答

1回答

Nolan

2021-11-14

没完全明白你的问题,应该是觉得context使用方法有点奇怪吧?context就是这样用的,可以仔细读一下官方文档

0
0

React17+Hook+TS4 优质实践,仿 Jira 企业级项目

解锁 React17 高阶用法,轻松应对大型复杂长周期项目

2691 学习 · 1236 问题

查看课程