这节课不是很明白...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就是这样用的,可以仔细读一下官方文档
00
相似问题