React中无需刷新页面如何从sessionStorage获取变量值？

问题原因 #

React组件只会在初始化或自身状态/ props变化时重新渲染。直接修改sessionStorage后，组件不会自动感知到这个变化，所以必须刷新页面重新读取sessionStorage才能拿到新值。

解决方案 #

方法一：用React Context管理状态并同步到sessionStorage #

这是最适合新手的方案，既保证组件能响应式更新，又能持久化存储数据。

1. 创建全局Context

import { createContext, useContext, useState, useEffect } from 'react';

const AppContext = createContext();

export const AppProvider = ({ children }) => {
  // 初始化时从sessionStorage读取数据
  const [annee, setAnnee] = useState(() => {
    const saved = sessionStorage.getItem('annee');
    return saved ? JSON.parse(saved) : null;
  });
  const [commune, setCommune] = useState(() => {
    const saved = sessionStorage.getItem('commune');
    return saved ? JSON.parse(saved) : null;
  });

  // 状态变化时同步更新sessionStorage
  useEffect(() => {
    if (annee) sessionStorage.setItem('annee', JSON.stringify(annee));
  }, [annee]);

  useEffect(() => {
    if (commune) sessionStorage.setItem('commune', JSON.stringify(commune));
  }, [commune]);

  return (
    <AppContext.Provider value={{ annee, setAnnee, commune, setCommune }}>
      {children}
    </AppContext.Provider>
  );
};

export const useAppContext = () => useContext(AppContext);

2. 在项目入口文件包裹AppProvider

import { AppProvider } from './AppContext';

ReactDOM.createRoot(document.getElementById('root')).render(
  <AppProvider>
    <App />
  </AppProvider>
);

3. 存值时直接修改Context状态

// 在需要存值的组件中
const { setAnnee, setCommune } = useAppContext();

// 当获取到annees和communes数据时
setAnnee(annees);
setCommune(communes);

4. 取值时直接从Context读取

// 在需要取值的组件中
const { commune, annee } = useAppContext();

// 使用数据（可选链避免null报错）
{commune?.ctd_name_commune}
{annee?.ctd_annee_libelle}

方法二：监听storage事件（适用于跨标签页场景） #

如果你的场景涉及跨标签页同步sessionStorage数据，可以在组件中添加监听事件，但注意同标签页内修改sessionStorage不会触发该事件，所以单页应用内路由切换优先用方法一。

import { useState, useEffect } from 'react';

const TargetComponent = () => {
  const [commune, setCommune] = useState(() => {
    const saved = sessionStorage.getItem('commune');
    return saved ? JSON.parse(saved) : null;
  });
  const [annee, setAnnee] = useState(() => {
    const saved = sessionStorage.getItem('annee');
    return saved ? JSON.parse(saved) : null;
  });

  useEffect(() => {
    const handleStorageChange = (e) => {
      if (e.key === 'commune') {
        setCommune(JSON.parse(e.newValue));
      } else if (e.key === 'annee') {
        setAnnee(JSON.parse(e.newValue));
      }
    };

    window.addEventListener('storage', handleStorageChange);
    return () => window.removeEventListener('storage', handleStorageChange);
  }, []);

  return (
    <>
      {commune?.ctd_name_commune}
      {annee?.ctd_annee_libelle}
    </>
  );
};

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