Utilizo la función useIsFocused()
de react-navigation/native
como una dependencia de useEffect
para escuchar el enfoque de la pantalla, por lo que cuando navego hacia atrás ingresa el if
con isFocused
y myRoute.params.isChecked
para ejecutar la función.
Pero no está actualizando el estado de la ruta en setRoute(newRoute);
y setIsLoading(false)
. Se setIsLoading(true)
dentro de la función, pero no se llama a la que está dentro de la ruta useEffect porque nunca llama a la actualización de la ruta. La pantalla sigue cargando infinitamente debido a eso.
¿Por qué no actualiza los estados de isLoading
y route
?
import React, { useEffect, useState } from 'react'; import { useFocusEffect, useIsFocused } from '@react-navigation/native'; const MyRoute = ({ navigation, route: myRoute }) => { const [route, setRoute] = useState({}); const [isLoading, setIsLoading] = useState(true); const isFocused = useIsFocused(); /** ... */ useEffect(() => { console.log('route call') if (Object.keys(route).length) { setIsLoading(false); } }, [route]); useEffect(() => { console.log(isLoading); }, [isLoading]); useEffect(() => { // trigger route refresh on navigate when checkin/checkout if (isFocused && myRoute.params?.isChecked) { const updateRouteWithCheckInOut = () => { setIsLoading(true); const newRoute = route; for (let i = 0; i < newRoute.visitas.length; i++) { const { sub_id, check_in_out } = myRoute.params; if (newRoute.visitas[i].sub_id === sub_id) { newRoute.visitas[i].realizada = true; newRoute.visitas[i].check_in_out = check_in_out; } } debugger; setRoute(newRoute); }; updateRouteWithCheckInOut(); } }, [isFocused]); /** ... */ }
está actualizando algunas propiedades de la matriz de visitas en su bucle for. la cosa es que solo estás mutando alguna propiedad y actualizando tu ruta con el mismo objeto. si marca route === newRoute después del bucle for, verá que se evalúa como verdadero. porque son el mismo objeto. y cuando actualiza su ruta con el mismo objeto, la reacción no vuelve a representar su componente. deberías actualizar tu ruta así:
setRoute(...newRoute)