es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo se llama useContext en React sin romper las reglas de hooks?

25 Jul, 2023 Programación

Estoy tratando de entender cómo llamar a una función de inicio de sesión para Google o Github dentro de mi proveedor de contexto.

¿Cuál es la forma adecuada de llamar a un proveedor de contexto en Next JS sin romper la regla de los hooks?

// 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) {

        //removido por brevedad

        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;

y mi página de inicio de sesión

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

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

  return (
    <div>
      <button onclick="{handleGithubLogin}">Iniciar sesión con Github</button>
      <button onclick="{handleGoogleLogin}">Iniciar sesión con Google</button>
    </div>
  );
}

export default Login;

¿Cómo puedo llamar a estas funciones de inicio de sesión sin romper las reglas de los hooks? ¿Cuál es la mejor manera de llamar a un proveedor de contexto desde mi página de inicio de sesión?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para llamar a las funciones de inicio de sesión sin romper la regla de los hooks, no debes llamar a los hooks dentro de una función o una declaración condicional. En su lugar, puedes utilizar el hook useEffect para llamar a la función de inicio de sesión cuando el componente se monte.

    En tu página de inicio de sesión, puedes modificar las funciones handleGithubLogin y handleGoogleLogin para utilizar el hook useEffect de la siguiente manera:

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

  useEffect(() => {
    // llama a la función de inicio de sesión cuando el componente se monta
    // esto asegurará que no estás rompiendo la regla de los hooks
    githubLogin();
  }, []);

  useEffect(() => {
    // llama a la función de inicio de sesión cuando el componente se monta
    // esto asegurará que no estás rompiendo la regla de los hooks
    googleLogin();
  }, []);

  return (
    <div>
      <button onclick="{githubLogin}">Iniciar sesión con Github</button>
      <button onclick="{googleLogin}">Iniciar sesión con Google</button>
    </div>
  );
};

export default Login;

    De esta manera, las funciones de inicio de sesión se llamarán solo una vez cuando el componente se monte y no romperás la regla de los hooks.

    Para llamar a un proveedor de contexto desde tu página de inicio de sesión, puedes utilizar el hook useContext para obtener el valor del contexto.

    import { useContext } from 'react';
import { Contexto } from './user';

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

  // ...
};

    Ten en cuenta que la variable Contexto debe ser exportada desde tu archivo user.js para que pueda ser importada y utilizada en otros archivos.

    import { createContext } from 'react';

export const Contexto = createContext();

// ...

Comments are closed.