React应用刷新后localStorage中收藏数组丢失问题排查

你的React应用中收藏夹数据刷新后丢失的核心原因是组件挂载阶段的useEffect执行顺序导致localStorage被初始空数组覆盖。

具体问题点 #

• 组件初始化时，useState将favourites设为[]。
• 第一个依赖[favourites]的useEffect会在组件挂载时执行（因为初始favourites是新的状态值），直接把空数组写入localStorage，覆盖了之前存储的真实数据。
• 随后第二个依赖[]的useEffect才去读取localStorage，此时读到的已经是空数组，最终导致刷新后favourites仍为空。

修复方案 #

最稳妥的方式是在useState初始化时直接从localStorage读取数据，彻底规避useEffect的执行顺序问题：

const App = () => {
  // 初始化state时直接读取localStorage，作为初始值
  const [favourites, setFavourites] = useState(() => {
    const savedData = localStorage.getItem("favourites");
    return savedData ? JSON.parse(savedData) : [];
  });

  // 仅当favourites状态变化时，同步保存到localStorage
  useEffect(() => {
    localStorage.setItem("favourites", JSON.stringify(favourites));
  }, [favourites]);

  return (
    <FavContext.Provider value={{ favourites, setFavourites }}>
      <HashRouter>
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/favorites" element={<Favorites />} />
        </Routes>
      </HashRouter>
    </FavContext.Provider>
  );
};

export default App;

如果坚持使用useEffect读取数据，可通过增加判断避免初始空数组覆盖：

// 修改保存逻辑的useEffect，仅当favourites不是初始空数组时执行保存
useEffect(() => {
  // 排除初始空数组的情况，避免覆盖已有数据
  if (favourites.length !== 0 || localStorage.getItem("favourites")) {
    localStorage.setItem("favourites", JSON.stringify(favourites));
  }
}, [favourites]);

不过这种方式存在局限性——若用户主动清空收藏夹，无法保存空数组状态，因此更推荐第一种方案。

额外确认：你的代码中localStorage键名"favourites"读写一致，且数据修改逻辑能在开发者工具中正常显示，这两部分无问题。

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