Shopify开发：useCart钩子与linesAdd回调添加商品时购物车清空问题

问题描述 #

首次进行Shopify项目开发，使用useCart()钩子与linesAdd()回调向购物车添加商品时，点击添加按钮后商品先被加入lines数组随即全部被移除。原代码如下：

import {useCart} from '@shopify/hydroge'

function Product({products, quantity}) {
 
 const {lines, linesAdd} = useCart();
 
 const handleCart = () => {
  products.map((item) => {
   const line = {
    quantity: quantity,
    merchandise: item
   }
  linesAdd(lines.push(line))
  })
 }
return (
 <Button onClick=(() => handleCart()) title={"add to cart"}/>
 )
}

问题原因 #

1. 错误传递参数给linesAdd：Array.push()返回的是数组新长度，而非要添加的购物车项对象，传给linesAdd会导致参数完全错误。
2. 直接修改受控状态：Hydrogen的lines是受控状态数组，手动调用push修改会破坏框架的状态管理逻辑，触发异常重置。
3. linesAdd用法误解：该方法需要接收要添加的购物车项数组，而非手动修改原数组后的结果。

修复后的代码 #

// 修正导入拼写错误
import {useCart} from '@shopify/hydrogen'

function Product({products, quantity}) {
 const {linesAdd} = useCart(); // 无需直接操作lines，可移除该变量
 
 const handleCart = () => {
  // 构建要添加的购物车项数组
  const itemsToAdd = products.map((item) => ({
    quantity: quantity,
    merchandise: item
  }))
  // 直接将数组传给linesAdd，Hydrogen会自动保留原有商品并添加新项
  linesAdd(itemsToAdd)
 }
 
 return (
  <Button onClick={handleCart} title={"add to cart"}/>
 )
}

关键修复点 #

• 修正了@shopify/hydroge的拼写错误，改为正确的@shopify/hydrogen
• 不再手动修改lines数组，而是构建新的购物车项数组传递给linesAdd
• linesAdd会自动处理购物车状态，保留原有商品并添加新项，无需手动维护lines数组

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