Shopify Hydrogen 2+Remix购物车异常：totalQuantity与价格归零

使用Shopify Hydrogen 2、Remix和React 18搭建商城前端时，通过CartForm.ACTIONS.LinesAdd添加商品出现以下异常：

• 表单提交无错误
• 购物车UI中确实出现新的商品条目
• totalQuantity短暂变为1后，又变回0
• 每个商品条目的价格变为$0.00

最终购物车显示所有商品均为$0.00。

浏览器控制台日志 #

[vite] connected
🧩 optimisticCart state: { totalQuantity: 1, lines: { nodes: [1] }, ... }
🛒 CartSummary cart:     { totalQuantity: 1, lines: { nodes: [1] }, ... }

/* 几秒后无任何操作 */

🧩 optimisticCart state: { totalQuantity: 0, lines: { nodes: [1] }, ... }

totalQuantity归零但商品条目仍保留，导致价格消失、购物车徽章显示“0”。

极简代码 #

购物车上下文 #

// CartContext.tsx
const CartContext = createContext<CartContextType | null>(null);

export function CartProvider({
  children,
  cart: initialCart,
}: {
  children: React.ReactNode;
  cart: CartApiQueryFragment | null;
}) {
  const cart = useOptimisticCart(initialCart);
  return (
    <CartContext.Provider value={{ cart }}>
      {children}
    </CartContext.Provider>
  );
}

加入购物车按钮 #

// AddToCartButton.tsx
export function AddToCartButton({
  lines,
  children,
}: {
  lines: Array<OptimisticCartLineInput>;
  children: React.ReactNode;
}) {
  const { getCartRoute } = useTranslation();

  return (
    <CartForm
      route={getCartRoute()}
      inputs={{ lines }}
      action={CartForm.ACTIONS.LinesAdd}
    >
      {(fetcher) => (
        <button type="submit" disabled={fetcher.state !== 'idle'}>
          {children}
        </button>
      )}
    </CartForm>
  );
}

购物车Action（始终输出0） #

// routes/($locale).cart.tsx
export async function action({ request, context }: ActionFunctionArgs) {
  const { cart } = context;
  const formData = await request.formData();
  const { action, inputs } = CartForm.getFormInput(formData);

  if (action === CartForm.ACTIONS.LinesAdd) {
    const result = await cart.addLines(inputs.lines);
    console.log('Cart after add:', result.cart?.totalQuantity); // always 0
    return result;
  }
}

已检查项 #

• Shopify后台库存充足
• 商品已发布至Online Store渠道
• 变体价格设置正确、配置无误
• 本地化购物车路由正确（如/es/cart、/cart等）
• 表单数据包含有效的merchandiseId GIDs
• 客户端与服务端控制台无错误
• 购物车会话Cookie存在
• Git切换至之前正常工作的旧提交，仍出现相同问题

环境信息 #

• Shopify Hydrogen 2024.10.0
• Remix 2.12.1
• React 18.3.1
• Node 18.x

状态截图描述 #

• 点击按钮时的状态：购物车显示新增商品条目，totalQuantity为1，价格正常显示
• 几秒后的状态：购物车商品条目保留，但totalQuantity变为0，所有商品价格显示为$0.00

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