Cómo estás. Este es el escenario de este problema. Digamos que hay 2 pantallas para hacerlo simple.
navegue de regreso a la pantalla A desde B. en este momento, no se llama a useEffect.
function CompanyComponent(props) { const [roleID, setRoleID] = useState(props.user.SELECTED_ROLE.id) useEffect(()=>{ // this called only once when A screen(this component) loaded, // but when comeback to this screen, it doesn't called setRoleID(props.user.SELECTED_ROLE.id) }, [props.user]) }Entonces, el estado actualizado de la pantalla A sigue siendo el mismo cuando regresa a la pantalla A nuevamente (sin cargar desde accesorios)
No estoy cambiando props.user en la pantalla B. Pero creo que const [roleID, setRoleID] = useState(props.user.SELECTED_ROLE.id) esta línea debería llamarse al menos.
Estoy usando redux-persist. Creo que esto no es un problema. Para la navegación, uso esto
// to go first screen A, screen B function navigate(routeName, params) { _navigator.dispatch( NavigationActions.navigate({ routeName, params, }) ); } // when come back to screen A from B function goBack() { _navigator.dispatch( NavigationActions.back() ); }¿Hay alguna devolución de llamada que pueda usar cuando aparece la pantalla? ¿Qué está mal con mi código?
Gracias
La siguiente solución funcionó para mí:
import React, { useEffect } from "react"; import { useIsFocused } from "@react-navigation/native"; const ExampleScreen = (props) => { const isFocused = useIsFocused(); useEffect(() => { console.log("called"); // Call only when screen open or when back on screen if(isFocused){ getInitialData(); } }, [props, isFocused]); const getInitialData = async () => {} return ( ...... ...... ) }He usado reaccionar navegación 5+
@react-navigation/nativo": "5.6.1"
Cuando navega de A a B, el componente A no se destruye (permanece en la pila de navegación). Por lo tanto, cuando navega hacia atrás, el código no se vuelve a ejecutar.
Quizás una mejor manera de lograr lo que desea usar los eventos del ciclo de vida de navegación (supongo que está usando react-navigation ), es decir, suscríbase al evento didFocus y ejecute el código que desee siempre que el componente esté enfocado, por ejemplo.
const unsubscribe = props.navigation.addListener('didFocus', () => { console.log('focussed'); });No olvide darse de baja cuando corresponda, por ejemplo
// sometime later perhaps when the component is unmounted call the function returned from addListener. In this case it was called unsubscribe unsubscribe();