React中Context API与React Router Dom联用的购物车状态异常问题

将Context API与React Router Dom结合使用时出现异常：

• Product组件可正常修改Context Provider传递的cartItem
• 切换至Cart组件时，获取到的cartItem为空对象
• 不使用React Router Dom，直接在同一页面渲染两个组件时，功能完全符合预期

Context API的状态仅存储在内存中，当通过页面刷新或直接在地址栏输入路由地址跳转时，React应用会重新初始化，Context的状态会重置为初始值（空对象）。而不使用路由时，两个组件始终在同一页面挂载，状态不会因页面刷新丢失。

将购物车状态持久化到localStorage，在Context初始化时从localStorage读取数据，更新状态时同步写入localStorage，确保页面刷新后状态可恢复。

context.js #

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

const cartContext = createContext();

function CartContextProvider({ children }) {
  // 初始化时从localStorage读取缓存的购物车数据
  const [cartItem, setCartItem] = useState(() => {
    const savedCart = localStorage.getItem('cartItem');
    return savedCart ? JSON.parse(savedCart) : {};
  });

  // 购物车状态变化时，同步写入localStorage
  useEffect(() => {
    localStorage.setItem('cartItem', JSON.stringify(cartItem));
  }, [cartItem]);

  return (
    <cartContext.Provider value={{ cartItem, setCartItem }}>
      {children}
    </cartContext.Provider>
  );
}

export function useCartContext() {
  return useContext(cartContext);
}

export default CartContextProvider;

额外优化建议 #

在Product组件中添加跳转到Cart页面的链接，避免用户直接输入URL导致状态丢失：

// 在Product组件顶部引入Link
import { Link } from 'react-router-dom';

// 在组件return的products容器内添加跳转链接
<div className='products'>
  <Link to="/cart" style={{margin: '1rem 0', display: 'block'}}>查看购物车</Link>
  {/* 原有产品列表渲染代码 */}
  {productobj.map((product, index) => (
    // ... 原有产品项代码
  ))}
</div>

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