Question

我有这样的代码

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;

在上面的代码中，我已经获得了每件商品的总价，但尚未获得购物车中所有物品的总价。我不知道如何将所有产品的价格汇总到购物车中并在用户界面中显示

Answer 1

简单总结所有项目在js中使用数组reduce：

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>
        </>
    );
};

Answer 2

似乎已经很明显了，因为您已经在每行中执行此操作了，但这是：

productsInCart.reduce((sum, item) => sum + parseInt(item.price) * item.quantity, 0)

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

2 个答案: