React无状态管理库及数据库时，跨页面共享cartData的最优方案

针对你的小型学习项目，推荐两种最实用的方案，完全不需要额外依赖：

方案1：提升状态到公共父组件 + React Context（推荐，适合组件间状态共享） #

你的App（包含Product页面）和Cart页面是同级路由组件，它们的公共父组件是包裹Routes的顶层组件。可以把cartData的状态提升到这里，再通过React Context让两个页面都能访问和修改状态。

具体实现步骤： #

1. 创建CartContext

// CartContext.js
import { createContext, useContext, useState } from 'react';

const CartContext = createContext();

export function CartProvider({ children }) {
  const [cartData, setCartData] = useState([]);

  // 定义添加到购物车的方法
  const updateCart = (product) => {
    setCartData(prev => {
      // 检查商品是否已在购物车，存在则更新数量，否则添加
      const existingItem = prev.find(item => item.id === product.id);
      if (existingItem) {
        return prev.map(item => 
          item.id === product.id 
            ? {...item, quantity: item.quantity + 1} 
            : item
        );
      } else {
        return [...prev, {...product, quantity: 1}];
      }
    });
  };

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

// 自定义hooks，方便组件调用
export function useCart() {
  return useContext(CartContext);
}

2. 在顶层组件包裹路由
   修改你的index.js，用CartProvider包裹整个路由：

// index.js
import { CartProvider } from './CartContext';
...
<CartProvider>
  <Routes>
    <Route exact path="/" element={<App/>}></Route>
    <Route exact path="/cart" element={<Cart/>}></Route>
  </Routes>
</CartProvider>
...

3. 在Product组件中使用
   修改App.js里的Product组件调用：

// App.js
import { useCart } from './CartContext';

function App() {
  const { updateCart } = useCart();
  // fetch Product data -> productData
  return (
    ...
    <Product data={productData} updateCart={updateCart} />
    ...
  );
}

4. 在Cart组件中使用

// Cart.js
import { useCart } from './CartContext';

function Cart() {
  const { cartData } = useCart();
  return (
    <div className="cart">
      {cartData.length === 0 ? (
        <p>购物车为空</p>
      ) : (
        cartData.map(item => (
          <div key={item.id} className="cart-item">
            <h3>{item.name}</h3>
            <p>数量: {item.quantity}</p>
            <p>价格: ${item.price * item.quantity}</p>
          </div>
        ))
      )}
    </div>
  );
}

方案2：本地存储（localStorage）+ 状态同步（适合持久化需求） #

如果希望刷新页面或重新打开浏览器后购物车数据不丢失，可以结合localStorage实现。可以和方案1结合，在状态更新时同步到本地存储，初始化时从本地存储读取。

修改CartContext的实现： #

// CartContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const CartContext = createContext();

export function CartProvider({ children }) {
  // 初始化时从localStorage读取数据
  const [cartData, setCartData] = useState(() => {
    const savedCart = localStorage.getItem('cartData');
    return savedCart ? JSON.parse(savedCart) : [];
  });

  useEffect(() => {
    // 状态变化时同步到localStorage
    localStorage.setItem('cartData', JSON.stringify(cartData));
  }, [cartData]);

  const updateCart = (product) => {
    setCartData(prev => {
      const existingItem = prev.find(item => item.id === product.id);
      if (existingItem) {
        return prev.map(item => 
          item.id === product.id 
            ? {...item, quantity: item.quantity + 1} 
            : item
        );
      } else {
        return [...prev, {...product, quantity: 1}];
      }
    });
  };

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

export function useCart() {
  return useContext(CartContext);
}

方案对比 #

• 方案1：纯React内置能力，适合不需要持久化的场景，状态管理更轻量，学习成本低。
• 方案2：在方案1基础上增加持久化，适合需要保留购物车数据的场景，完全满足小型项目需求。

这两个方案都不需要引入任何第三方状态管理库，完全符合你的当前需求，也是React小型项目中状态共享的最佳实践。

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