你如何在不破壞鉤子規則的情況下在React中呼叫useContext？-有解無憂

我試圖了解如何在我的背景關系提供程式中為 Google 或 Github 呼叫登錄函式。

在不破壞鉤子規則的情況下，在 Next JS 中呼叫背景關系提供程式的正確方法是什么？

// user.js
const Context = createContext();

const Provider = ({ children }) => {
  const [user, setUser] = useState(supabase.auth.user());
  const [isLoading, setIsLoading] = useState(true);
  const router = useRouter();

  useEffect(() => {
    const getUserProfile = async () => {
      const sessionUser = supabase.auth.user();

      if (sessionUser) {

        //removed for brevity

        setUser({
          ...sessionUser,
          ...profile,
        });

        setIsLoading(false);
      }
    };

    getUserProfile();

    supabase.auth.onAuthStateChange(() => {
      getUserProfile();
    });
  }, []);

  const githubLogin = async () => {
    await supabase.auth.signIn({
      provider: "github",
    });
  };

  const googleLogin = async () => {
    await supabase.auth.signIn({
      provider: "google",
    });
  };

  const logout = async () => {
    await supabase.auth.signOut();
    setUser(null);
    router.push("/");
  };

  const exposed = {
    user,
    googleLogin,
    githubLogin,
    logout,
    isLoading,
  };

  return <Context.Provider value={exposed}>{children}</Context.Provider>;
};

export const useUser = () => useContext(Context);
export default Provider;

和我的登錄頁面

// login.js
const Login = () => {
    
    const handleGithubLogin = () => {
      const { githubLogin } = useUser();
      useEffect(githubLogin, []);
    }

    const handleGoogleLogin = () => {
      const { googleLogin } = useUser();
      useEffect(googleLogin, []);
    };

  return (
    <div>
      <button onClick={handleGithubLogin}>Login with Github</button>
      <button onClick={handleGoogleLogin}>Login with Google</button>
    </div>
  );
  }

export default Login;

如何在不破壞鉤子規則的情況下呼叫這些登錄函式？從我的登錄頁面呼叫背景關系提供程式的最佳方式是什么？

uj5u.com熱心網友回復：

將呼叫移動useUser到組件主體中，然后在需要時呼叫它回傳的函式。我認為沒有理由使用useEffect.

const Login = () => {
  const { githubLogin, googleLogin } = useUser();

  const handleGithubLogin = () => {
    githubLogin();
  }

  const handleGoogleLogin = () => {
    googleLogin();
  }

  return (
    <div>
      <button onClick={handleGithubLogin}>Login with Github</button>
      <button onClick={handleGoogleLogin}>Login with Google</button>
    </div>
  );
}

// OR:
const Login = () => {
  const { githubLogin, googleLogin } = useUser();

  return (
    <div>
      <button onClick={githubLogin}>Login with Github</button>
      <button onClick={googleLogin }>Login with Google</button>
    </div>
  );
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/386187.html

標籤：反应下一个.js 超基地

上一篇：DjangoSimpleJWT：令牌認證的一些問題

下一篇：使用React獲取API資料