React项目Local Storage购物车存储与读取展示问题求助

1. 修复ProductDetails.js的存储逻辑 #

原代码每次仅存储单个商品ID且覆盖旧数据，未保存完整商品信息及数量逻辑。需改为存储包含完整商品信息和数量的购物车数组：

const addProduct = (product) => {
  // 读取本地存储的现有购物车，无数据则为空数组
  const existingCart = JSON.parse(localStorage.getItem("cartItems")) || [];
  
  // 检查商品是否已在购物车中
  const targetItemIndex = existingCart.findIndex(item => item.id === product.id);

  if (targetItemIndex !== -1) {
    // 商品已存在，数量+1
    const updatedCart = [...existingCart];
    updatedCart[targetItemIndex] = {
      ...updatedCart[targetItemIndex],
      quantity: (updatedCart[targetItemIndex].quantity || 1) + 1
    };
    localStorage.setItem("cartItems", JSON.stringify(updatedCart));
    dispatch(addToCart(updatedCart));
  } else {
    // 商品不存在，新增商品并默认数量为1
    const updatedCart = [...existingCart, { ...product, quantity: 1 }];
    localStorage.setItem("cartItems", JSON.stringify(updatedCart));
    dispatch(addToCart(updatedCart));
  }
};

2. 修复MyCart.js的读取逻辑 #

原代码仅读取单个商品数据，需改为读取完整购物车数组并初始化Redux状态：

useEffect(() => {    
  const cartItems = localStorage.getItem("cartItems");
  if (cartItems) {
    const parsedCartItems = JSON.parse(cartItems);
    // 触发初始化购物车的action，替代单次添加
    dispatch(initCart(parsedCartItems));
  }
}, [dispatch]);

3. 修复Redux Reducer逻辑 #

需添加重复商品数量更新、购物车初始化的处理逻辑：

const cartReducer = (state = { cartItems: [] }, action) => {
  switch (action.type) {
    case "ADD_TO_CART":
      const item = action.payload;
      const existingItem = state.cartItems.find(i => i.id === item.id);

      if (existingItem) {
        // 已有商品则更新数量
        return {
          ...state,
          cartItems: state.cartItems.map(i => 
            i.id === existingItem.id ? { ...i, quantity: i.quantity + 1 } : i
          )
        };
      } else {
        // 新商品则添加到购物车
        return {
          ...state,
          cartItems: [...state.cartItems, { ...item, quantity: 1 }]
        };
      }
    case "INIT_CART":
      // 初始化购物车，直接同步本地存储数据
      return {
        ...state,
        cartItems: action.payload
      };
    default:
      return state;
  }
};

核心注意事项 #

• LocalStorage仅支持字符串存储，必须用JSON.stringify和JSON.parse处理数组/对象
• 购物车需维护「商品ID+数量」的结构，避免重复添加相同商品条目
• 每次修改购物车后，需同步更新LocalStorage与Redux状态
• 组件挂载时从LocalStorage读取完整购物车数据，初始化Redux状态

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