ReactJS新手开发购物车页面 无法计算列表商品总金额求助

你只需要在拉取购物车数据时计算所有商品的总价，再替换支付汇总区域的固定金额即可，具体修改内容如下： #

核心修改点 #

• 1、调整接口请求后的逻辑，新增商品总价计算，同时修复空购物车时访问resp[0]._id报错的问题
  在useEffect中拿到返回的resp数据后，新增以下逻辑：

  // 计算所有商品总价，默认值为0避免空数组报错
  const goodsTotal = resp.reduce((sum, item) => sum + Number(item.totalprice), 0)
  setTotal(goodsTotal)
  // 仅当购物车有商品时设置ID
  if(resp.length > 0) {
    setID(resp[0]._id)
  }
  

• 2、替换支付汇总区域的固定金额为动态计算值
  找到订单汇总模块对应的代码，修改为：

  <div className="d-flex justify-content-between">
    <h5>Order Summery</h5>
    <h5>Rs. {total}</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>
    {/* 总金额 = 商品总价 + 10元运费 */}
    <h5 className="font-weight-bold">Rs. {total + 10}</h5>
  </div>
  

完整修改后代码 #

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(0); // 初始值改为0
  const [loading, setLoading] = useState(true);
  const [cartSate, setcartState] = useState(true);
  const [id, setID] = useState('');
  const history = useHistory();

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const response = await fetch('/getcartItems', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        });
        const resp = await response.json();
        console.log(resp);
        setCart(resp);
        // 新增计算商品总价逻辑
        const goodsTotal = resp.reduce((sum, item) => sum + Number(item.totalprice), 0)
        setTotal(goodsTotal)
        setLoading(false);
        // 修复空购物车报错
        if(resp.length > 0) {
          setID(resp[0]._id);
        }
        setcartState(true);

        if (!response) {
          alert('user not authorized');
          history.push('/');
        } else if (response.status == 400) {
          history.push('/');
        } else if (response.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. {total}</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. {total + 10}</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;

内容的提问来源于stack exchange，提问作者Keerthan Achar