Vercel部署后localStorage中cart对象存为字符串致购物车异常

在Vercel部署网站后，发现localStorage里的cart本应是对象，却被存储为字符串"cart"，导致购物车无法正常显示。购物车对象在addToCart方法中创建，初始为空对象，添加商品时以商品编码为键，存储qty、price、name、size、variant等属性。

相关代码片段：

if (itemCode in cart) {
  newCart[itemCode].qty = cart[itemCode].qty + qty
}
else {
  newCart[itemCode] = { qty: 1, price, name, size, variant }
}

完整代码：

const [cart, setCart] = useState({})

const [subTotal, setSubTotal] = useState(0)

useEffect(() => {
  try {
    if (localStorage.getItem("cart")) {
      setCart(JSON.parse(localStorage.getItem("cart")));   
      saveCart(JSON.parse(localStorage.getItem("cart"))); 
    }
  } 
  catch (error) {
    console.error(error);
    localStorage.clear;
  }
}, [])

const saveCart = (myCart) => {
  localStorage.setItem("cart",JSON.stringify(myCart))
  let subt = 0;
  
  let keys = Object.keys(myCart)
  for (let index = 0; index < keys.length; index++) {
    subt += myCart[keys[index]].qty * myCart[keys[index]].price
  }
  setSubTotal(subt)
}

const addToCart = (itemCode, qty, price, name, size, variant) => {
  let newCart = cart;

  if (itemCode in cart) {
    newCart[itemCode].qty = cart[itemCode].qty + qty
  }
  else {
    newCart[itemCode] = { qty: 1, price, name, size, variant }
  }

  setCart(newCart);
  saveCart(newCart);
}

问题截图：

修复方案 #

1. 修复状态更新的引用问题 #

在addToCart中直接引用原cart对象，会导致React无法检测到状态变化，进而引发存储异常。需要创建原对象的浅拷贝：

const addToCart = (itemCode, qty, price, name, size, variant) => {
  // 浅拷贝原cart对象
  let newCart = { ...cart };

  if (itemCode in cart) {
    // 嵌套对象需再次拷贝，避免修改原状态
    newCart[itemCode] = { ...newCart[itemCode], qty: newCart[itemCode].qty + qty };
  } else {
    newCart[itemCode] = { qty: 1, price, name, size, variant };
  }

  setCart(newCart);
  saveCart(newCart);
}

2. 修正localStorage清除方法调用 #

catch块中localStorage.clear缺少括号，无法执行清除操作，需改为：

catch (error) {
  console.error(error);
  localStorage.clear();
}

3. 简化初始化逻辑 #

避免重复解析localStorage，优化useEffect内的代码：

useEffect(() => {
  try {
    const savedCart = localStorage.getItem("cart");
    if (savedCart) {
      const parsedCart = JSON.parse(savedCart);
      setCart(parsedCart);
      saveCart(parsedCart);
    }
  } catch (error) {
    console.error(error);
    localStorage.clear();
    setCart({});
    setSubTotal(0);
  }
}, [])

完成以上修改后，即可解决cart被错误存储为字符串的问题，恢复购物车正常功能。

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