Triggering a re-fetch when coming back from a dialog modal react

JamieRhys 0
Viewed 34

I have an add contact Modal and an add company Modal. When the user wants to add a contact they click the corresponding button which opens said Modal. Typically, they would fill out the information needed on this form. One of them being a Company they belong to. If the company does not exist in the system, they then have an add company button which when pressed opens another Modal on top of the contact one.

Again, the user enters the information for the company and once done, would tap save. This would then trigger a fetch which POSTS the information to my Spring Boot backend which in turn sends back a JSON object version of the company which has come from the database.

I then check it and if it comes back valid, it sets out an alert telling the user it was successful and closes the company Modal.

At this point, the user should be able to type the company name into the contact company autocomplete and find the company they've added.

However, at this point, that is not happening. The re-fetch is not triggered at all despite me thinking that when the Contact Modal is re-rendered it would trigger the re-fetch.

I've tried clearing the contactList within the return() function but this causes a Too many re-renders error.

My question is, how would I trigger a re-fetch from within the contact list once it has returned from the company modal?

fetch-api reactjs javascript
2 Answers

My initial thought would be to not have more than one modal open at the same time. Feel free to disagree but that doesn't seem like that's how modals are intended to work. As an alternative, you could have an "Other" option and have a set of text fields conditionally appear. Upon completing the form, have a boolean variable (or however you want to do it) be passed into your backend that kicks of the business logic that creates a new company before adding the contact. Or add all that logic to your add contact SQL procedure to avoid making (a risky) two db calls for one action.

Refetch Problem
Without looking at your code, it's possible that if you're using the useEffect hook, you aren't passing any dependencies to "listen" for certain variables that have been changed. After the data comes back from that POST call, you should add code that updates the array populating the select company dropdown field (eg .then() callback)--assuming it is a dropdown and an array. This change in state should re-render the component but, for a better user experience, you may want to do it in a way that it doesn't blank out the rest of your fields.

drethedevjs0

You are probably using useEffect which makes the loop. Try to connect refetch with an event - click or submit, within try/catch - via 2 way binding eventHandler prop that calls praticular function. Also you can change the state, and refectch the results after the new loading of the page. Hope it helps, even as a hint!

Nikola Cvetic0
Related