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

    准备好购物车为空时的显示

    全部删除后，显示“购物车是空的”。如果只显示一个空列表和 ¥0 的合计，看起来就像坏掉了。

使用的工具

UI 组件（按钮）

shadcn/ui →

图标（＋ 和 −）

lucide-react →

点击查看第 2 部分的比较