Блог

Я создаю здесь страницу корзины, на странице корзины будут отображаться товары, к которым был добавлен пользователь, а также его цена. На той же странице я хочу отобразить общую сумму всех товаров, представленных на странице корзины, в Сводке платежей(сводке заказов). Пожалуйста, помогите мне, я новичок в реагировании.

Вот мой ReactJS кодекс Cart page

 import React, { useEffect, useState } from 'react';
import { useHistory } from 'react-router';
import '../cart.css';

function Cart() {
  const tvalue = 0;
  const [cart, setCart] = useState([]);
  const [paymentsummery, setpaymentsummery] = useState(0);
  const [total, setTotal] = useState('');
  const [loading, setLoading] = useState(true);
  const [cartSate, setcartState] = useState(true);
  const [id, setID] = useState('');
  const history = useHistory();

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const responce = await fetch('/getcartItems', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        });
        const resp = await responce.json();
        console.log(resp);
        setCart(resp);
        setLoading(false);
        setID(resp[0]._id);
        setcartState(true);

        if (!responce) {
          alert('user not authorized');
          history.push('/');
        } else if (responce.status == 400) {
          history.push('/');
        } else if (responce.status == 401) {
          alert('cart is empty');
        }
      } catch {
        // alert('cart is empty')
        setcartState(false);
      }
    };
    fetchUser();
  }, []);

  if (cartSate == true) {
    return (
      <div className="cart_cont row container-fluid">
        {loading ? (
          <div className="loading_div">
            <h1 className="loading">Loading...</h1>
          </div>
        ) : (
          cart.map((itms, index) => (
            <div key={index} className="innerCart my-0 col-8">
              <div className="cartDetails">
                <div className="slno  d-flex flex-column">
                  <label htmlFor="" className="text-danger m-auto">
                    Sl.No
                  </label>
                  <p className="m-auto">{index   1}</p>
                </div>
                <div className="cartImage ">
                  <img
                    src={itms.productimage}
                    alt="cart_image"
                    height="100px"
                  />
                </div>
                <div className="title  d-flex flex-column">
                  <label htmlFor="" className="text-danger m-auto">
                    Item Name
                  </label>
                  <p className="m-auto">{itms.productname}</p>
                </div>
                <div className="qty d-flex flex-column">
                  <label htmlFor="" className="text-danger m-auto">
                    Quantity
                  </label>
                  <p className="m-auto">{itms.qty}</p>
                </div>
                <div className="tprice  d-flex flex-column">
                  <label htmlFor="" className="text-danger m-auto">
                    Price
                  </label>
                  <p className="m-auto">{itms.totalprice}</p>
                </div>
                <div className="d-flex ">
                  <i className="fas fa-trash m-auto" />
                </div>
              </div>
              <hr />
            </div>
          ))
        )}

        {loading ? (
          <div />
        ) : (
          <div className="priceDetails  col-4 ">
            <div className="innerPriceDetails rounded">
              <h1 className="paymentSummery h3 p-2">Payment Summery </h1>
              <div className=" d-flex justify-content-between mx-2 my-2">
                <span>Transaction code</span>
                <span>Vd7jl0rq9ppe</span>
              </div>
              <div className="coupen d-flex m-3 justify-content-between">
                <input
                  type="text"
                  className="form-control mr-2"
                  placeholder="COUPON CODE"
                />
                <button className="btn btn-info  px-5">Apply</button>
              </div>
              <hr />
              <div className="order_summery m-3">
                <div className="d-flex justify-content-between">
                  <h5>Order Summery</h5>
                  <h5>Rs. </h5>
                </div>
                <div className="d-flex justify-content-between">
                  <h5>Shipping charges</h5>
                  <h5>Rs. 10</h5>
                </div>
                <div className="d-flex justify-content-between">
                  <h5>Additional services</h5>
                  <h5>Rs. 00</h5>
                </div>
                <div className="d-flex justify-content-between">
                  <h5 className="font-weight-bold">Total amount</h5>
                  <h5 className="font-weight-bold">Rs. 5400</h5>
                </div>

                <hr />
                <p className="d-flex bg-danger expires text-white p-2 rounded justify-content-between">
                  Sale Expires in: 21Hours, 31 Minutes
                </p>
              </div>
            </div>
            <button className="btn btn-warning w-100 my-3 font-weight-bold p-2">
              CHECKOUT
            </button>
          </div>
        )}
      </div>
    );
  }
  return (
    <div>
      <h1 className="display-3 mt-5">CART IS EMPTY!</h1>
    </div>
  );
}

export default Cart;
 

выше я поделился всем своим кодом страницы корзины, обычно данные корзины будут отображаться из базы данных.
Пожалуйста, помогите мне.

Для этого вы бы использовали Array.reduce для вычисления общего итога:

Перед вашей функцией возврата:

 const grandTotal = cart.reduce((a, c) => a   c.totalprice, 0);
 

Затем вы можете разместить grandTotal его там, где захотите, чтобы он отображался.