0

Tengo un hook que en teoría permite la actualización de un estado en dos distintos archivos para mostrar distintas pantallas, pero cuando lo utilizo no funciona.

Mi código cuenta en 3 archivos:

  1. useChangeScreen

En este archivo declaro los useState para poder definir que pantalla se muestra:

export const useChangeScreen = () => {
    ...
      const [homeActivo, setHomeActivo] = useState(false);
      const [searchActivo, setSearchActivo] = useState(true);
      const [profileActivo, setProfileActivo] = useState(false);
    ...
      const irAHome = () => {
        setHomeActivo(true);
        setSearchActivo(false);
        setProfileActivo(false);
      };
      const irASearch = () => {
        setHomeActivo(false);
        setSearchActivo(true);
        setProfileActivo(false);
      };
      const irAProfile = () => {
        setHomeActivo(false);
        setSearchActivo(false);
        setProfileActivo(true);
      };
    ...
    return  {
      homeActivo,
      searchActivo,
      profileActivo,
      irAHome,
      irASearch,
      irAProfile
    }
}
  1. navigation

En este archivo cree el componente que en teoría permite el pasar de una página a otra:

export const Nav = () => {
      const {
        irAHome,
        irANotifi,
        irAProfile,
        irASearch
      } = useChangeScreen();
    ...
    return (
    ...
    <TouchableOpacity onPress={irAHome}>
    ...
    <TouchableOpacity onPress={irASearch}>
    ...
    <TouchableOpacity onPress={irAProfile}>
    ...
    )
    }

Y por ultimo el archivo :

  1. ScreenController

Donde llamo las pantallas para que se muestren según el estado de las variables en useChangeScreen

export const ScreenController =() => {
  const {
    homeActivo,
    searchActivo,
    profileActivo,
  } = useChangeScreen();
...
return(
...
      {homeActivo ? (
        <HomeScreen />
      ) : searchActivo ? (
        <SearchShopsScreen />
      ) : profileActivo ? null : null}
...
)
}

1 respuesta 1

0

El problema es que aunque uses un custom hook el estado no se comparte entre los componentes, es decir, los custom hooks te ayudan a reutilizar alguna lógica entre tus componentes pero cada componente donde uses ese hook manejará su propio su propia versión del estado, es decir, si llamas irAHome desde Nav, el cambio en homeActivo solo se va a reflejar en Nav, funciona igual para ScreenController.

Así que las alternativas que tienen para este caso son:

  1. Compartir el estado a través de props desde un componente padre a los componentes hijos.

  2. Usar la api Context de React.

  3. Si usas alguna librería de manejo de estado como Redux.

La primera opción te sería util si no tienes tantos componentes anidados y si todos los componentes que compartirán el estado están en el mismo componente contenedor. También hay que tomar en cuenta que si necesitas compartir alguno de estos estados en otros componentes, definitivamente esta no sería una opción.

La segunda opción es la que veo más acertada en este caso. Puedes crear un contexto y de esa forma te aseguras manejar un solo estado para todos los componentes que usen ese contexto.

Acá en la documentación oficial en español puedes encontrar más información de cómo funcionan o cómo implementar Contextos en React.

1
  • Gracias, estoy usando context para solucionarlo
    – Ligia
    el 26 may. 2021 a las 1:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.