页面刷新时sidebar上下文折叠状态无法保留的技术问题

React 的 useState 状态仅存储在浏览器内存中，页面刷新时整个应用会重新初始化，所有组件重新挂载，useState 会回到你设置的初始值 false。虽然你在 Details 页面的 useEffect 里尝试修改状态，但这个操作是在组件挂载后执行的，刷新时会先渲染初始的展开状态（false），之后才会触发状态修改，甚至可能因为组件渲染顺序或上下文更新的延迟，导致你看到的还是默认的展开状态。

要实现刷新后保持折叠状态，需要把侧边栏状态持久化到 localStorage，让页面刷新时从本地存储读取初始值，而不是硬编码的 false。

步骤1：修改 Context 中的状态初始化 #

在存储状态的 Context Provider 中，修改 useState 的初始化逻辑，从 localStorage 读取之前保存的状态：

const [isSidebarCollapsed, setIsSidebarCollapsed] = useState<boolean>(() => {
  // 从localStorage读取状态，不存在则用默认值false
  const savedState = localStorage.getItem('isSidebarCollapsed');
  return savedState ? JSON.parse(savedState) : false;
});

步骤2：同步状态到本地存储 #

添加一个 useEffect，监听状态变化，每次状态更新时同步保存到 localStorage：

useEffect(() => {
  localStorage.setItem('isSidebarCollapsed', JSON.stringify(isSidebarCollapsed));
}, [isSidebarCollapsed]);

步骤3：优化 Details 页面的逻辑 #

不需要判断当前状态，直接在进入页面时强制设置为折叠状态即可（重复设置不会有副作用）：

useEffect(() => {
  setIsSidebarCollapsed(true);
}, []);

• 页面刷新时，useState 会优先从 localStorage 读取之前保存的状态，而不是使用默认的 false。
• 每次修改侧边栏状态时，都会同步更新 localStorage，确保刷新后状态不会丢失。
• Details 页面的 useEffect 会在组件挂载时强制将状态设为折叠，保证进入该页面时侧边栏始终处于折叠状态，同时这个修改也会同步到 localStorage，刷新后依然保持折叠。

内容的提问来源于stack exchange，提问作者itsDespair1000