React购物车数据持久化到Local Storage时数据类型变更问题

你当前的问题出在添加商品到购物车的逻辑以及购物车状态初始化两个核心点：

• handleAddToCart中直接用setCart(previewData)把数组状态替换成了单个商品对象，而非向数组中追加元素
• 初始化cart状态时没有从LocalStorage读取已保存的数据，刷新页面后购物车会直接清空

1. 修复添加商品的逻辑 #

修改handleAddToCart方法，利用数组扩展运算符保留原有购物车数据，将新商品对象追加到数组末尾：

const handleAddToCart = () => {
  // 基于原有购物车数组创建新数组，追加新商品
  setCart(prevCart => [...prevCart, previewData]);
};

如果需要避免重复添加同一商品，可以通过商品ID做判断：

const handleAddToCart = () => {
  setCart(prevCart => {
    // 检查当前商品是否已在购物车中
    const isItemExist = prevCart.some(item => item.id === previewData.id);
    return isItemExist ? prevCart : [...prevCart, previewData];
  });
};

2. 从LocalStorage初始化购物车状态 #

组件挂载时优先读取LocalStorage中的已保存数据，作为cart的初始值，保证页面刷新后购物车数据不丢失：

const [cart, setCart] = useState(() => {
  const savedCart = localStorage.getItem("MY_CART");
  // 解析本地存储数据，不存在则返回空数组
  return savedCart ? JSON.parse(savedCart) : [];
});

完整修改后的Figurelist组件代码 #

import React, { useEffect, useState } from "react";
import "swiper/css/pagination";
import "swiper/css/grid";
import Preview from "./Preview";
import Figure from "./Figure";
import Search from "./Search";
import ReactPaginate from 'react-paginate'

const Figurelist = ({ myTheme, figures }) => {
  // 从LocalStorage初始化购物车状态
  const [cart, setCart] = useState(() => {
    const savedCart = localStorage.getItem("MY_CART");
    return savedCart ? JSON.parse(savedCart) : [];
  });
  
  useEffect(() => {
    localStorage.setItem("MY_CART", JSON.stringify(cart))
  }, [cart])

  const handleAddToCart = () => {
    // 追加商品并避免重复添加
    setCart(prevCart => {
      const isItemExist = prevCart.some(item => item.id === previewData.id);
      return isItemExist ? prevCart : [...prevCart, previewData];
    });
  }

  return (
    <div>
      {isPreview === true && 
      <Preview previewData={previewData} 
      handlePreview={handlePreview}
      handleAddToCart={handleAddToCart}/>}
    </div>
  );
};

export default Figurelist;

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