页面刷新后localStorage值为空？Context API购物车数据丢失排查

你的问题核心是useReducer初始化时未使用localStorage中的购物车数据，而是直接用initialState，同时额外维护的retrievedState完全多余，没起到实际作用，最终导致页面刷新后数据被重置。

具体问题分析 #

1. 页面刷新时，useReducer直接以initialState初始化状态，随后useEffect会立刻把这个初始状态覆盖到localStorage，把之前存储的有效数据冲掉。
2. retrievedState仅在组件挂载时读取了一次localStorage，但从未将其同步到useReducer的state中，相当于只是个“摆设”，对实际购物车状态没有影响。

修复步骤 #

1. 移除多余的retrievedState #

删掉所有和retrievedState相关的代码，包括useState声明和setRetrievedState调用，因为useReducer的state就是我们需要维护的购物车状态。

2. 修改useReducer的初始状态 #

初始化时优先从localStorage读取数据，读取失败（比如首次打开页面）再用initialState，同时要处理localStorage.getItem返回null的情况，避免JSON.parse报错。

3. 简化useEffect逻辑 #

只保留将state同步到localStorage的代码即可。

修复后的完整代码 #

function CartProvider({ children }: Props) {
  // 初始化时优先从localStorage读取，失败则用initialState
  const initialCartState = JSON.parse(localStorage.getItem("cart") || "null") || initialState;
  const [state, dispatch] = useReducer(reducer, initialCartState);

  useEffect(() => {
    // 状态变更时同步到localStorage
    localStorage.setItem("cart", JSON.stringify(state));
  }, [state]);

  console.log("当前购物车状态:", state);

  return (
    <CartContext.Provider value={{ state, dispatch }}>
      {children}
    </CartContext.Provider>
  );
}

验证效果 #

修改后：

• 状态变更时，useEffect会自动把最新的购物车数据存入localStorage
• 页面刷新时，useReducer会直接用localStorage中存储的数据初始化状态，不会被重置

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