Question

大家好！我正在尝试为一个从 API 获取的简单网站实现购物车。所以我的渲染方法看起来像这样......

{somedata.map((items) => {
        return (
          <div key={items._id} className="col-md-3 col-12 my-2">
            <div className="card h-100">
              <button
                className="btn btn-light"
                onClick={() => addItem(items)}
              >
                Add to Cart
              </button>

              <img className="card-img-top" src={items.photo.url} alt="" />
              <div className="card-body text-center">
                <h3 className="card-title m-2">{items.title}</h3>
                <p className="card-text">{items.description}</p>
                <span className="card-text border p-3 m-2">
                  <b>CAD {items.price} $</b>
                </span>
              </div>
            </div>
          </div>
        );
      })}

这就是我的购物车的样子。我只是使用他们提供给我们的例子。

return (
  <>
    <div className="row cart_box">
      <h1>Cart ({totalUniqueItems})</h1>

      <ul className="cart_ul">
        {items.map((item) => (
          <li key={item.id} className="cart_li">
            {item.quantity} x {item.title}
            <div>
              <img
                className="img-fluid"
                src={item.photo.url}
                width="100px"
                alt=""
              />
            </div>
            <button
              className="btn btn-info"
              onClick={() => updateItemQuantity(item.id, item.quantity - 1)}
            >
              -
            </button>
            <button
              className="btn btn-info"
              onClick={() => updateItemQuantity(item.id, item.quantity + 1)}
            >
              +
            </button>
            <button
              className="btn btn-info"
              onClick={() => removeItem(item.id)}
            >
              &times;
            </button>
          </li>
        ))}
       </ul>
    </div>
   </>
   );
   }

我现在的问题是如何实现总价？我确实在那里看到了一个 cartotal 方法，但我不知道如何实现它。任何帮助表示赞赏谢谢！ :)

Answer 1

似乎 cartTotal 只是代表购物车总价值的一个值。据我所知，这不是一个函数。

您可以通过状态 interface 看到它是一个数字：

interface InitialState {
  id: string;
  items: Item[];
  isEmpty: boolean;
  totalItems: number;
  totalUniqueItems: number;
  cartTotal: number; // <-- number type
  metadata?: Metadata;
}

初始状态object：

export const initialState: any = {
  items: [],
  isEmpty: true,
  totalItems: 0,
  totalUniqueItems: 0,
  cartTotal: 0, // <-- number value
  metadata: {},
};

它计算实现的总值here：

const calculateTotal = (items: Item[]) =>
  items.reduce((total, item) => total + item.quantity! * item.price, 0);

您应该能够从 cartTotal 钩子的返回对象中解构 useCart。

const { cartTotal } = useCart();

...

<div>Cart total: {cartTotal}</div>

如果 cartTotal 不适合您，那么您也可以自己手动计算购物车总数，对您已经呈现的 items 数组使用相同的计算方法。

反应使用购物车组件。如何计算总价

1 个答案: