当我从页面来回移动时，它不会发送发布请求

Question

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);
      }
    );
  }
}, []);

Answer 1

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]);