React Context状态经localStorage持久化后仍在导航返回页面时丢失，原因何在？

我帮你捋捋可能的问题和对应的解决办法，先从你的代码细节入手分析~

可能的原因 #

1. BuildProvider的作用域没覆盖全局 #

如果你的BuildProvider只包裹了单个页面组件，而不是整个React应用的根组件（比如App.js或者index.js），那导航离开页面时，页面组件会卸载，但localStorage里的数据其实还在；可当你返回时，页面组件重新挂载，BuildProvider也会跟着重新初始化——这时候理论上应该从localStorage读数据，但如果读取环节出问题，就会直接回到默认值。

不过你说导航到其他页面时数据没丢，那大概率Provider是在根组件？那再看其他可能。

2. 不小心触发了状态重置 #

你的代码里有个resetAllStates函数，会不会在页面的卸载钩子（比如页面组件里的useEffect返回函数）中调用了这个方法？要是这样的话，你导航离开页面时，就会触发状态重置并同步到localStorage，等你返回时，读取到的自然就是清空后的状态了。

3. localStorage读取/解析出了问题 #

你每个useState都单独去读localStorage.getItem(STORAGE_KEY)再解析，逻辑上没问题，但如果某次存储时localStorage里的结构不完整（比如某个字段漏存了），或者JSON解析失败（比如存储的字符串被意外篡改），就会导致对应的状态直接回到默认值，看起来像是“数据丢失”。

4. 笔误导致状态更新异常 #

我注意到代码里有个笔误：setReporFound(false)，正确的应该是setReportFound(false)（少了个t）。这个错误会导致reportFound状态无法正确更新，虽然不一定直接导致所有数据丢失，但可能打乱状态同步的逻辑，进而让localStorage存储的数据出现异常。

对应的解决方案 #

1. 让BuildProvider包裹整个应用 #

把BuildProvider移到应用的根组件，这样不管你导航到哪个页面，Provider都不会卸载，状态会一直保存在内存中，同时同步到localStorage，从根源避免页面切换时的状态重置问题。

2. 排查是否意外调用了resetAllStates #

检查页面组件或其他相关代码，看看有没有在页面卸载时调用resetAllStates的逻辑，如果不是业务需要，就把这个调用删掉。

3. 优化localStorage的读取逻辑 #

把所有状态的初始化合并成一次读取，减少重复操作，同时增加错误处理，避免解析失败导致的状态异常：

// 替换原来单个useState的初始化逻辑
const initialState = useMemo(() => {
  try {
    const saved = localStorage.getItem(STORAGE_KEY);
    return saved ? JSON.parse(saved) : {};
  } catch (err) {
    console.error("读取localStorage状态失败:", err);
    return {};
  }
}, []);

// 每个状态用initialState的对应值或默认值初始化
const [selectedBuild, setSelectedBuild] = useState(initialState.selectedBuild ?? null);
const [selected_OSTL, setOSTL] = useState(initialState.selected_OSTL ?? "oeivi/oe/oemanifest");
// 其他状态同理照葫芦画瓢就行

4. 修复笔误 #

把setReporFound(false)改成setReportFound(false)，确保状态能正常更新并同步到localStorage。

5. 加调试日志排查 #

在初始化状态的地方加个日志，看看返回页面时localStorage里到底有没有数据：

const initialState = useMemo(() => {
  const saved = localStorage.getItem(STORAGE_KEY);
  console.log("从localStorage初始化状态:", saved);
  try {
    return saved ? JSON.parse(saved) : {};
  } catch (err) {
    console.error("解析失败:", err);
    return {};
  }
}, []);

这样就能直观看到是localStorage里没数据，还是读取/解析环节出了问题。

内容来源于stack exchange