I have a component where I list the policies. For example, when I come to the payment screen of the "A" policy, I send a post request. I can view the installments of policy "A". Then i go back by pressing back button in browser and go to the payment screen of policy "B". I see the installments of the "A" policy on the screen that comes up. If we refresh the page it send a post request and I can view the installments of policy "B". How do I send the post request without refreshing the page?
service
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);
});
});
};
component
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);
}
);
}
}, []);
For performance optimization, React Navigation avoids mounting the screen every time the user revisited it. you need to listen to the screen focus event and then run your logic there.
React Navigation provides a hook which work with normal useEffect
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]);