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

【问题标题】：Async/Await a Page Reload in React TypeScript在 React TypeScript 中异步/等待页面重新加载
【发布时间】：2021-12-09 00:39:05
【问题描述】：

我有一个按钮，当我点击它时，它应该按顺序执行以下操作：

首先刷新页面
然后在 React 中打开侧窗格

这是我现有的代码 sn-p：

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

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

setPaneIsOpen 是一个状态，当设置为 true 时，将打开侧窗格。我想先刷新页面，然后设置窗格。

我已经尝试过这种异步/等待承诺方法：

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

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

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

但我似乎无法处理页面重新加载。我试图创建一个代码沙箱，但由于这非常复杂，我不能。如果我能够重现，我会尝试在编辑中添加一个。

【问题讨论】：

为什么要重新加载页面？你不能用状态来管理哪个面板是打开的吗？
即使你使用了 async-await，你也不能在页面刷新后使用现有状态，所以你可以尝试一件事，你可以将 sidePaneIsOpen 值保存在本地存储中，并在组件渲染使用效果上检查值是否在本地存储中，同样您可以管理
正如@Andy 所说，可能存在比 reload->setIsPaneOpen 更好的解决方案。但是，我想您可以通过查看以下问题来解决重新加载问题：stackoverflow.com/questions/41904975/…

标签： javascript reactjs typescript async-await

【解决方案1】：

一个 hacky 方法是使用 localStorage。

添加在页面加载时运行的 useEffect：

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

像这样更新你的按钮：

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

【讨论】：