React中SessionStorage存储值页面重载被覆盖无法持久化问题

你的代码持久化失效是三个逻辑错误共同导致的，实际执行顺序完全不符合预期：

• 初始化时机错误：useState(defaultLayout)在组件首次渲染第一时间就把状态设为prop传入的默认值，后续useEffect里的状态更新会触发重渲染，而监听defaultLayout的useEffect会在挂载后立刻执行，直接把你从sessionStorage读到的值覆盖回defaultLayout，甚至会把sessionStorage里已经存好的用户选择也覆盖成默认值
• 存储读取逻辑错误：新增的空依赖useEffect里连续三次调用setActiveButton，最后一次调用的结果会覆盖前两次赋值，完全没判断当前页面实际加载的是左上/右上/左下哪个位置的组件，不管当前在哪个位置都会强行读左下组件的存储值
• 存储写入逻辑冗余：handleActiveButton里写入sessionStorage后立刻重复读取、重复写入的分支完全没有必要，冗余代码容易引入状态不一致问题

1. 统一存储key生成逻辑 #

先抽离公共方法，根据当前组件的位置参数（left/top）和业务id（alertTypeId）生成唯一存储key，避免重复写判断逻辑：

const getActiveTabStorageKey = () => {
  if (!alertTypeId) return null;
  if (left && top) return `ACTIVE_TAB_TOP_LEFT_${alertTypeId}`;
  if (!left && top) return `ACTIVE_TAB_TOP_RIGHT_${alertTypeId}`;
  if (left && !top) return `ACTIVE_TAB_BOTTOM_LEFT_${alertTypeId}`;
  return null;
};

2. 状态初始化时优先读取持久化值 #

利用useState支持初始化函数的特性，组件首次挂载时直接读取对应key的sessionStorage值，读不到时再回退到defaultLayout，不需要等useEffect执行再赋值：

const [activeButton, setActiveButton] = useState(() => {
  const storageKey = getActiveTabStorageKey();
  if (!storageKey) return defaultLayout;
  const storedTab = window.sessionStorage.getItem(storageKey);
  // 如果存储值不存在，用传入的默认布局值
  return storedTab ?? defaultLayout;
});

3. 简化标签切换处理逻辑 #

切换标签时只需要写入对应存储key、更新本地状态即可，去掉重复读写的冗余代码：

const handleActiveButton = (activeBtn) => {
  const storageKey = getActiveTabStorageKey();
  if (!storageKey) return;
  window.sessionStorage.setItem(storageKey, activeBtn);
  setActiveButton(activeBtn);
};

4. 修正默认值同步逻辑 #

原来监听defaultLayout的useEffect只要prop变化就覆盖状态，会冲掉用户已经持久化的选择，调整为仅当没有持久化存储值时，才同步prop传入的默认值：

useEffect(() => {
  const storageKey = getActiveTabStorageKey();
  // 没有有效存储key时直接同步默认值
  if (!storageKey) {
    setActiveButton(defaultLayout);
    return;
  }
  const storedTab = window.sessionStorage.getItem(storageKey);
  // 仅当不存在持久化值时，才同步prop传入的默认布局
  if (!storedTab) {
    setActiveButton(defaultLayout);
  }
// 把所有依赖项加入数组，避免闭包拿到旧值
}, [defaultLayout, left, top, alertTypeId]);

• 删掉之前新增的连续三次调用setActiveButton的空依赖useEffect，这部分逻辑已经整合到状态初始化步骤里，保留反而会导致状态被错误覆盖
• sessionStorage存储的所有值都是字符串类型，如果你的activeButton是数字、布尔等非字符串类型，读取后需要手动做类型转换，避免类型不匹配导致标签激活判断失效

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