React UI Playground

購物車

修改購物車裡商品的數量，或刪除商品。小計、運費和總計會依照購物車的內容自動計算。

這段程式碼由 1 個檔案組成。

CartPage.tsx

購物車頁面

使用方法（Next.js）

在自己的專案裡顯示這個畫面的 3 個步驟

  1. 1

    在終端機安裝要用的元件和函式庫（只需一次）

    npx shadcn@latest add button
    npm i lucide-react

    如果專案還沒有安裝 shadcn/ui，先執行一次 npx shadcn@latest init

  2. 2

    把檔案貼到這個位置

    my-app/
├─ components/
│   └─ cart/
│       └─ CartPage.tsx   ← 從上面的視窗複製的
└─ app/
    └─ cart/
        └─ page.tsx   ← 在第 3 步建立

    資料夾不存在就新建。

  3. 3

    在頁面檔案中匯入

    import CartPage from "@/components/cart/CartPage"

export default function Page() {
  return <CartPage />
}

    寫在 app/cart/page.tsx 中。執行 npm run dev，開啟 /cart 就能看到

重點

  1. 1

    只改寫或刪除列表中的其中一項

    修改數量時，用 map 產生一個「只有這件商品數量改變」的新列表。刪除時，用 filter 產生一個「留下這件商品以外所有商品」的新列表。不要直接動到原本的列表。

  2. 2

    總計不要存起來，每次重新計算

    小計、運費和總計不要放進 state，而是每次都從購物車的內容計算。內容一改變，總計自然就會對上（存起來反而會造成數字對不上）。

  3. 3

    準備好購物車是空的時候的畫面

    全部刪除後，顯示「購物車是空的」。如果只顯示一個空列表和 NT$0 的總計，看起來就像壞掉了。

使用的工具

UI 元件（按鈕）

shadcn/ui →

圖示（＋ 和 −）

lucide-react →

點擊查看第 2 部分的比較