React TypeScript中如何用Async/Await实现刷新后打开侧边栏？

云上老周

2026-9-29

问题根因

window.location.reload() 会触发浏览器全页面重载，当前页面所有运行时JS上下文、内存状态、待执行的异步任务都会被完全销毁，你封装Promise的方案不可能生效，await后的代码在刷新触发瞬间就不会被执行。

正确实现方案

核心思路是通过会话级存储跨刷新传递状态：刷新前将「需要打开侧边栏」的标记存入sessionStorage（刷新不丢失，关闭当前标签页自动清除，不会污染永久存储），页面加载完成后读取标记判断是否要打开侧边栏，使用后立即删除标记避免后续误触发。

1. 修改按钮点击逻辑

const handleRefreshAndOpen = () => {
  // 存入刷新后打开侧边栏的标记
  sessionStorage.setItem('openSidebarAfterRefresh', 'true');
  window.location.reload();
}

<button onClick={handleRefreshAndOpen}>Click me</button>

2. 页面挂载时读取标记执行逻辑

在侧边栏所属的组件或者项目根组件的挂载生命周期中添加判断逻辑：

import { useState, useEffect } from 'react';

const LayoutComponent = () => {
  const [paneIsOpen, setPaneIsOpen] = useState(false);

  useEffect(() => {
    // 读取刷新标记
    const shouldOpenSidebar = sessionStorage.getItem('openSidebarAfterRefresh');
    if (shouldOpenSidebar === 'true') {
      setPaneIsOpen(true);
      // 用完立即删除标记，避免后续刷新重复触发
      sessionStorage.removeItem('openSidebarAfterRefresh');
    }
  }, []);

  // 其余组件逻辑
  return (
    // 你的布局代码，侧边栏组件绑定paneIsOpen状态
  )
}