在 React TypeScript 中异步/等待页面重新加载

Question

I am having a button, and when I click on it, it should do the following things in order:

• First refresh the Page
• Then Open the Side Pane in React

This is my code snippet that is existing:

<button onClick={() => {
    refreshPage();
    setPaneIsOpen(true);
}}>Click me</button>

const refreshPage = () => {
    window.location.reload();
}

setPaneIsOpen is a State that when set to true, will open the side pane. I want to specifially first refresh the page and then set the Pane.

I have tried this async/await promise approach:

 function refreshPagePromise() {
      return new Promise<void>((resolve) => {
           window.location.reload();
           resolve();
      });
 }

 async function refreshAndOpen() {
      await refreshPagePromise();
      setIsPaneOpen(true);
 }

 <button onClick={() => { refreshAndOpen(); }}>Click me</button>

But I cannot seem to handle page reload. I tried to create a Code Sandbox, but since this is very complex, I could not. I will try to add one in the edits If I was able to reproduce.

Answer 1

One hacky way would be to use localStorage.

add this useEffect that runs on page load:

useEffect(() => {
    const shouldOpenPane = !!localStorage.getItem("setPaneOpen")
    if(shouldOpenPane){
        setIsPaneOpen(true);
        // Maybe the row beneath should not be there, 
        // Idk what behaviour u want if user reloads page manually
        localStorage.removeItem("setPaneOpen")
    }
}, []);

Update your button like this:

<button
      onClick={() => {
        localStorage.setItem("setPaneOpen", "true"); // can be set to any thruthy value
        refreshPage();
      }}
    >
      Click me
    </button>