Refresh page after and call a function automatically in react

user_13839038 0
Viewed 2373

I want to create a function that refreshes the page and then call element and click:

const handlePDF = () => {
    
    window.location.reload(false); 
   
    pdfRef.current.click()

  };

I had thought about setTimeout but it doesn't work like that either.

I imagine that I have to save that order in memory once the page is refreshed but I don't know how to do it.

I appreciate your help guys.

reactjs
3 Answers

You can use sessionStorage on window load event to solve that.

1. Listen window on load

window.onload = () => {
    let reloading = sessionStorage.getItem("reloading");
    if (reloading) {
        sessionStorage.removeItem("reloading");
        pdfRef.current.click();
    }
}

2. Save a session on handlePDF call

const handlePDF = () => {
    sessionStorage.setItem("reloading", "true");
    window.location.reload(false); 
};
user_53090840

I had a similar requirement to your's, before.

The solution that I settled with is to use sessionStorage to flag states, so that some flag is available to you, upon page refresh.

Then, you'd look for that flag in a useEffect callback.

But first, let's create a constant, so that we don't aimlessly repeat ourselves.

const handlePdfFlag = 'handle_pdf';

Then, create the flag in localStorage, then reload the page.

const handlePDF = () => {
  sessionStorage.setItem(handlePdfFlag, 'true');
  window.location.reload(false);
};

Then, in some useEffect, you'd pick up the flag, ensuring that you delete the flag afterwards.

useEffect(() => {
  if (sessionStorage.getItem(handlePdfFlag) === 'true' && pdfRef.current) {
    sessionStorage.removeItem(handlePdfFlag);
    pdfRef.current.click();
  }
});
user_5385700

If you want a function that does some code based on something changing then maybe the useEffect hook will work for you.

user_122930800
Related