Tengo un componente donde enumero las políticas. Por ejemplo, cuando llego a la pantalla de pago de la póliza "A", envío una solicitud de correo. Puedo ver las cuotas de la póliza "A". Luego vuelvo presionando el botón Atrás en el navegador y voy a la pantalla de pago de la póliza "B". Veo las cuotas de la póliza "A" en la pantalla que aparece. Si refrescamos la página envía una solicitud de publicación y puedo ver las cuotas de la política "B". ¿Cómo envío la solicitud de publicación sin actualizar la página?
Servicio
const getAsosPaymentInfo = (getPolicyAccountInfoRequestDto) => { return new Observable((observer) => { axiosInstance .post(SERVICE_PATH + '/getAsosPaymentInfo', getPolicyAccountInfoRequestDto) .then((response) => { observer.next(response.data); observer.complete(); }) .catch((err) => { console.log(err); }); }); };componente
const { paymentInfoData, setPaymentInfoData } = useContext(PaymentInfoDataContext); useEffect(() => { if (Object.keys(paymentInfoData).length === 0 && props.location.state.policy.isActive === true) { PolicyService.getAsosInstallments( { policyNumber: props.location.state.policy.policyNumber, renewalNumber: props.location.state.policy.renewalNumber, policyTypeExtCode: props.location.state.policy.policyType.extCode, productTypeExtCode: props.location.state.policy.productType.extCode } ).subscribe( (response) => { setPaymentInfoData(response); } ); } }, []);Para optimizar el rendimiento, React Navigation evita montar la pantalla cada vez que el usuario la vuelve a visitar. necesita escuchar el evento de enfoque de pantalla y luego ejecutar su lógica allí.
React Navigation proporciona un gancho que funciona con useEffect normal
import {useIsFocused, useNavigation} from '@react-navigation/native'; // Some where inside screen const { paymentInfoData, setPaymentInfoData } = useContext(PaymentInfoDataContext); const isFocused = useIsFocused() useEffect(() => { if (Object.keys(paymentInfoData).length === 0 && props.location.state.policy.isActive === true) { PolicyService.getAsosInstallments( { policyNumber: props.location.state.policy.policyNumber, renewalNumber: props.location.state.policy.renewalNumber, policyTypeExtCode: props.location.state.policy.policyType.extCode, productTypeExtCode: props.location.state.policy.productType.extCode } ).subscribe( (response) => { setPaymentInfoData(response); } ); } }, [isFocused]);