自定义钩子不是函数 React

Question

当我尝试从我的自定义钩子中调用一个函数时，当屏幕加载说setAuth不是一个函数时，我得到一个错误。

useAuth.js

import { useContext } from "react";
import AuthContext from "../context/AuthProvider";
const useAuth = () => {
  return useContext(AuthContext);
}
export default useAuth;

login.js

import useAuth from '../hooks/useAuth';
...
const Login = () => {
 const { setAuth } = useAuth();
 ....
 setAuth({ email, password, accessToken });
 ...
 }

如果我尝试显示typeof(setAuth)我会变得不明确。

Answer 1

您需要确保您的 AuthContext 具有 setAuth 功能。 在您调用 AuthContext.Provider 的地方，您必须在 value 属性中提供 setAuth 函数

<AuthContext.Provider value={{ setAuth }}>

然后您可以访问setAuth

const useAuth = () => {
 const { setAuth } = useContext(AuthContext);
 return setAuth
}

login.js

const Login = () => {
 const setAuth = useAuth();
 ....
 setAuth({ email, password, accessToken });
 ...
 }