Búsqueda de sitios web

javascript - Exportar un estado desde una función hook a otro componente

Tengo un archivo/función hook en el que quiero exportar un estado llamado 'isAuth'. Cuando intento importar este estado en otro archivo como import {isAuth} from '../AuthService/AuthRoute' obtengo un error de intento de importación. Mi plan es establecer y obtener este estado globalmente en mi aplicación de React

Así es como quiero exportar el estado desde la función/hook del componente:

export default function AuthRoute () {

  const [isAuth, setIsAuth] = useState(false);
  
  return {isAuth}

}

Así es como planeo importar el estado

import  {isAuth} from '../AuthRoute/AuthRoute'

function Login () {
 
  const [usernameAuth, setUsernameAuth] = useState("");
  const [passwordAuth, setPasswordAuth] = useState("");
  const [loginStatus, setLoginStatus] = isAuth();  //Imported state
  const [inputResponse, setInputResponse] = useState("");

Respuesta #1

Puedes usar contextos para establecer estados globales como este. Crea un archivo llamado "AuthContext" que se vea así

import { createContext } from 'react';

export const AuthContext = createContext(false);

En tu archivo App.js puedes crear un estado y proporcionarlo a tus componentes hijos de la siguiente manera

import React, { useState } from 'react';
import { AuthContext } from './path/to/AuthContext';


const App = props => {
const [isAuth, setIsAuth] = useState(false);

return (
<AuthContext.Provider value={[isAuth, setIsAuth]}>
//YOUR APPLICATION
</AuthContext.Provider >
)
}

Ahora tienes tu estado isAuth proporcionado a todos tus componentes de nivel superior. Si alguna vez quieres ver o manipular ese estado en un componente, simplemente haz lo siguiente:

import React, { useContext } from 'react';
import { AuthContext } from './path/to/AuthContext';

const YourComponent = props => {
const [isAuth, setIsAuth] = useContext(AuthContext);

return (
//Your component code
)
}

Como nota final, aconsejaría no usar un booleano para verificar si alguien está autorizado o no a nivel global. Puede causar problemas extraños en ocasiones. Es mucho más seguro usar cadenas como "AUTHORIZED" o "NOT_AUTHORIZED".

Respuesta #2

Así no funciona la exportación.

En tu código, estás exportando la función en sí, no el valor que devuelve.

Si vas a escribir un hook personalizado, solo úsalo así:

export default function useAuthRoute () {

  const [isAuth, setIsAuth] = useState(false);
  
  return {isAuth}

}

import useAuthRoute from '../AuthRoute/AuthRoute'

function Login () {
  const { isAuth } = useAuthRoute()
  ...

Necesitas "llamar" a esa función y usar el valor que retorna. Y asegúrate de comenzar el nombre de la función con "use" para seguir las reglas de los hooks de React. Puedes encontrar más sobre export aquí

Artículos relacionados