1

I have an issue with an app with four forms. Each page of the form does a POST when the component unmounts. It was business requirement that anytime the user leaves the page, the form info is POSTed, so I cannot move the logic to the 'NEXT' button I have on the page.

When the next page of the form loads, it needs to do a GET. My issue is that the POST may take some time, so the GET is being called before the POST.

How do I wait for the POST service call to complete before I route the user to the next page of the form where the GET occurs.

This is what I have in the first page of the form. The onSubmit triggers the routing to the next page and then when the component unmounts, it makes the service call that needs to complete before it gets to the next page.

componentWillUnmount() {
    this.props.postServiceCall();
}

onSubmit = () => {
    routeToNextPage();
};

On the next page I have the GET, which is completing before my POST is complete.

componentDidMount() {
    this.props.getServiceCall();
}

I am using react router. Specifically browser router. Reminder: I cannot change the POST to happen with the onSubmit. The post needs to occur every time the user leaves the page so their data is saved to the server.

Any ideas would help!

HotInPhoenix
  • 132
  • 9

1 Answers1

0

You must use localStorage instead to send a network request. It is always recommended to store partial information in localStorage to tackle the little caveats like your case. You can anytime retrieve info from localStorage. Anyways ajax calls are asynchronous we can't be sure if previous request has been persisted in our DB.

Sakhi Mansoor
  • 7,832
  • 5
  • 22
  • 37
  • I agree this would be a great solution, but the intialValues pulled in on the form on the next page are dependent on what was posted from the previous page. Some additional logic is done on the API as well. – HotInPhoenix Aug 27 '18 at 15:47