时间戳

首页 > 解决方案 > 如何在 Reactjs 中获取购物车中所有产品的总价

reactjs - 如何在 Reactjs 中获取购物车中所有产品的总价

问题描述

我有这样的代码

const Cart = ({ fetchCartRequest, productsInCart }) => {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  useEffect(() => {
    const userId = localStorage.getItem("userData");
    fetchCartRequest(userId);
  }, [fetchCartRequest]);


  return (
    <>
      <Image src={CartIcon} alt="Cart icon" onClick={handleShow} />
      <Modal show={show} onHide={handleClose} size="md">
        <Modal.Header closeButton>
          <Modal.Title>Cart detail</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {!!productsInCart && productsInCart.length > 0 ? (
            productsInCart.map((item, index) => {
              return (
                <CartContainer
                  key={index}
                  image={item.image}
                  name={item.name}
                  price={parseInt(item.price) * item.quantity}
                  quantity={item.quantity}
                />
              );
            })
          ) : (
              <h4 className="center-title">Cart list is empty!</h4>
            )}
          <div>
            <h3>Total price: </h3>
          </div>
        </Modal.Body>
        <Modal.Footer className="d-flex justify-content-center">
          <Button btnText="Checkout" onClick={handleClose} />
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default Cart;

在我上面的代码中，我已经获得了每件商品的总价，但我还没有获得购物车中所有商品的总价。我想知道，我怎样才能总结购物车中产品的所有价格并在 UI 中显示

在此处输入图像描述

标签： reactjsshopping-cart

解决方案

reduce简单求和所有项目在js中使用数组：

const Cart = ({ fetchCartRequest, productsInCart }) => {
    const [show, setShow] = useState(false);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    useEffect(() => {
        const userId = localStorage.getItem("userData");
        fetchCartRequest(userId);
    }, [fetchCartRequest]);


    return (
        <>
            <Image src={CartIcon} alt="Cart icon" onClick={handleShow} />
            <Modal show={show} onHide={handleClose} size="md">
                <Modal.Header closeButton>
                    <Modal.Title>Cart detail</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    {!!productsInCart && productsInCart.length > 0 ? (
                        productsInCart.map((item, index) => {
                            return (
                                <CartContainer
                                    key={index}
                                    image={item.image}
                                    name={item.name}
                                    price={parseInt(item.price) * item.quantity}
                                    quantity={item.quantity}
                                />
                            );
                        })
                    ) : (
                        <h4 className="center-title">Cart list is empty!</h4>
                    )}
                    <div>
                        <h3>Total price:
                            {!!productsInCart && productsInCart.length > 0 ? (
                                productsInCart.reduce((sum, item) => sum + parseInt(item.price) * item.quantity, 0)
                            ) : null}
                        </h3>
                    </div>
                </Modal.Body>
                <Modal.Footer className="d-flex justify-content-center">
                    <Button btnText="Checkout" onClick={handleClose} />
                </Modal.Footer>
            </Modal>
        </>
    );
};

推荐阅读