React+TS 实现购物车

React+TS 实现购物车

购物车是电子商务网站中一个非常重要的功能。它允许用户在浏览商品时将商品添加到购物车中，以便以后结账。在本文中，我们将介绍如何使用 React 和 TypeScript 创建一个购物车。

效果展示

首先，让我们来看一下最终效果。

[图片]

静态页面展示

第一步，我们需要创建一个静态页面来展示购物车。在这个页面中，我们将放置一个表格来显示购物车中的商品信息，以及一个按钮来结账。

创建工程

接下来，我们需要创建一个 React 项目。您可以使用以下命令来创建一个新的项目：

npx create-react-app my-shopping-cart

静态页面移植 & 组件拆分

现在，我们可以将静态页面移植到我们的 React 项目中。我们将把表格和按钮组件分别拆分成单独的文件。

App.jsx

import React from "react";
import Cart from "./Cart";

const App = () => {
  return (
    <div className="App">
      <Cart />
    </div>
  );
};

export default App;

cart.jsx

import React, { useState, useEffect } from "react";

const Cart = () => {
  const [cartItems, setCartItems] = useState([]);

  useEffect(() => {
    fetch("http://localhost:3000/cart-items")
      .then((res) => res.json())
      .then((data) => setCartItems(data));
  }, []);

  return (
    <div className="Cart">
      <table>
        <thead>
          <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {cartItems.map((item) => (
            <tr key={item.id}>
              <td>{item.product}</td>
              <td>{item.quantity}</td>
              <td>{item.price}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <button>Checkout</button>
    </div>
  );
};

export default Cart;

加载数据 & 列表渲染

接下来，我们需要从服务器加载购物车数据并将其渲染到表格中。我们将使用 useEffect 钩子来加载数据。

定义购物车数据

const cartItems = [
  {
    id: 1,
    product: "Apple",
    quantity: 2,
    price: 1.99,
  },
  {
    id: 2,
    product: "Orange",
    quantity: 1,
    price: 0.99,
  },
  {
    id: 3,
    product: "Banana",
    quantity: 3,
    price: 0.49,
  },
];

cart.jsx

import React, { useState, useEffect } from "react";

const Cart = () => {
  const [cartItems, setCartItems] = useState([]);

  useEffect(() => {
    setCartItems(cartItems);
  }, []);

  return (
    <div className="Cart">
      <table>
        <thead>
          <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {cartItems.map((item) => (
            <tr key={item.id}>
              <td>{item.product}</td>
              <td>{item.quantity}</td>
              <td>{item.price}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <button>Checkout</button>
    </div>
  );
};

export default Cart;

组件挂载时加载购物车数据

import React, { useState, useEffect } from "react";

const Cart = () => {
  const [cartItems, setCartItems] = useState([]);

  useEffect(() => {
    fetch("http://localhost:3000/cart-items")
      .then((res) => res.json())
      .then((data) => setCartItems(data));
  }, []);

  return (
    <div className="Cart">
      <table>
        <thead>
          <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {cartItems.map((item) => (
            <tr key={item.id}>
              <td>{item.product}</td>
              <td>{item.quantity}</td>
              <td>{item.price}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <button>Checkout</button>
    </div>
  );
};

export default Cart;

使用useEffect 挂载购物车数据

import React, { useState, useEffect } from "react";

const Cart = () => {
  const [cartItems, setCartItems] = useState([]);

  useEffect(() => {
    fetch("http://localhost:3000/cart-items")
      .then((res) => res.json())
      .then((data) => setCartItems(data));
  }, []);

  return (
    <div className="Cart">
      <table>
        <thead>
          <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
          {cartItems.map((item) => (
            <tr key={item.id}>
              <td>{item.product}</td>
              <td>{item.quantity}</td>
              <td>{item.price}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <button>Checkout</button>
    </div>
  );
};

export default Cart;

总结

在本文中，我们介绍了如何使用 React 和 TypeScript 创建一个购物车。我们学习了如何设置项目，创建组件，加载数据并渲染列表。我们还学习了如何使用 useEffect 钩子来挂载购物车数据。希望本文对您有所帮助。