Javascript 无法在购物车中显示总价

所以我现在面临的问题是这个。我在CartContext中有一个Cart逻辑。除了小计之外，其他一切都正常。它应该显示项目的价格总价，但它显示的是NAN。下面是代码沙盒的真实链接，以便更好地理解 购物车上下文

import React from "react";
function getCartFromLocalStorage() {
  return localStorage.getItem("cart")
    ? JSON.parse(localStorage.getItem("cart"))
    : [];
}

const CartContext = React.createContext();

function CartProvider({ children }) {
  const [cart, setCart] = React.useState(getCartFromLocalStorage());
  const [total, setTotal] = React.useState(0);
  const [cartItems, setCartItems] = React.useState(0);

  React.useEffect(() => {
    localStorage.setItem("cart", JSON.stringify(cart));

    let newTotal = cart.reduce((total, cartItem) => {
      return (total += cartItem.amount * cartItem.price);
    }, 0);
    newTotal = parseFloat(newTotal.toFixed(2));
    setTotal(newTotal);
    // cart items
    let newCartItems = cart.reduce((total, cartItem) => {
      return (total += cartItem.amount);
    }, 0);
    setCartItems(newCartItems);
  }, [cart]);

  // global functions
  const removeItem = id => {
    setCart([...cart].filter(item => item.id !== id));
  };
  const increaseAmount = id => {
    const newCart = [...cart].map(item => {
      return item.id === id
        ? { ...item, amount: item.amount + 1 }
        : { ...item };
    });
    setCart(newCart);
  };
  const decreaseAmount = (id, amount) => {
    if (amount === 1) {
      removeItem(id);
      return;
    } else {
      const newCart = [...cart].map(item => {
        return item.id === id
          ? { ...item, amount: item.amount - 1 }
          : { ...item };
      });

      setCart(newCart);
    }
  };
  const addToCart = book => {
    const { id, image, by, bookName,RegularPrice } = book;
    const item = [...cart].find(item => item.id === id);

    if (item) {
      increaseAmount(id);
      return;
    } else {
      const newItem = { id, image, by, bookName, RegularPrice, amount: 1 };
      const newCart = [...cart, newItem];
      setCart(newCart);
    }
  };
  const clearCart = () => {
    setCart([]);
  };
  return (
    <CartContext.Provider
      value={{
        cart,
        cartItems,
        total,
        removeItem,
        increaseAmount,
        decreaseAmount,
        addToCart,
        clearCart
      }}
    >
      {children}
    </CartContext.Provider>
  );
}

export { CartContext, CartProvider };

从“React”导入React；
函数getCartFromLocalStorage（）{
返回localStorage.getItem（“购物车”）
？JSON.parse（localStorage.getItem（“购物车”））
: [];
}
const CartContext=React.createContext（）；
函数提供程序（{children}）{
const[cart，setCart]=React.useState（getCartFromLocalStorage（））；
const[total，setTotal]=React.useState（0）；
常量[cartItems，setCartItems]=React.useState（0）；
React.useffect（（）=>{
setItem（“cart”，JSON.stringify（cart））；
让newTotal=cart.reduce（（总计，cartItem）=>{
退货（合计+=cartItem.amount*cartItem.price）；
}, 0);
newTotal=parseFloat（newTotal.toFixed（2））；
setTotal（新总数）；
//购物车项目
让newCartItems=cart.reduce（（总计，cartItem）=>{
退货（合计+=cartItem.金额）；
}, 0);
setCartItems（newCartItems）；
}，[cart]）；
//全局函数
const removietem=id=>{
setCart（[…cart].filter（item=>item.id！==id））；
};
const increaseAmount=id=>{
const newCart=[…cart].map（项=>{
return item.id==id
？{…项目，金额：项目金额+1}
：{……项目}；
});
setCart（newCart）；
};
常数递减金额=（id，金额）=>{
如果（金额==1）{
removeItem（id）；
返回；
}否则{
const newCart=[…cart].map（项=>{
return item.id==id
？{…项，金额：项.金额-1}
：{……项目}；
});
setCart（newCart）；
}
};
const addToCart=book=>{
const{id，image，by，bookName，RegularPrice}=book；
const item=[…购物车].find（item=>item.id==id）；
如果（项目）{
增加金额（id）；
返回；
}否则{
const newItem={id，image，by，bookName，RegularPrice，amount:1}；
const newCart=[…cart，newItem]；
setCart（newCart）；
}
};
常量clearCart=（）=>{
setCart（[]）；
};
返回(
{儿童}
);
}
导出{CartContext，CartProvider}；

购物车项目

import React, { useContext } from "react";
import {Link, useHistory } from 'react-router-dom'
import { CartContext } from "../../context/cart";
import { FaAngleDown, FaAngleUp } from "react-icons/fa";
import Checkout from "./Checkout";
export default function CartItem({ id, image,bookName, RegularPrice, by, amount }) {
  const { removeItem, increaseAmount, decreaseAmount } = React.useContext(
    CartContext
  );
  return (
      <div id={id} className="cart__item">
          <img className='cart__image' src={image}  />
        <div className='cart__itemdesc'>
         <h4>{bookName}</h4>
        <h6 className='cart__by'>By: {by}</h6>
        <button
          className="cart__removebtn"
          onClick={() => {
            removeItem(id);
          }}
         >
          Remove
        </button>
        <div>
        <button
          className="cart-btn amount-btn"
          onClick={() => {
            increaseAmount(id);
          }}
        >
          <FaAngleUp />
        </button>
        <p className="item-amount">{amount}</p>
        <button
          className="cart-btn amount-btn"
          onClick={() => {
            decreaseAmount(id, amount);
          }}
        >
          <FaAngleDown />
        </button>
      </div>
        </div>  
        <span className='circle'><span className='circleone'></span></span>
        <span className='cart__regular'>{RegularPrice}</span>      
        <div>   
        <Checkout />
        </div>    
    </div>
  );
}

import React，{useContext}来自“React”；
从“react router dom”导入{Link，useHistory}
从“./../context/cart”导入{CartContext}”；
从“react icons/fa”导入{FaAngleDown，FaAngleUp}；
从“/Checkout”导入签出；
导出默认函数CartItem（{id，image，bookName，RegularPrice，by，amount}）{
const{removietem，increaseAmount，decreateAmount}=React.useContext(
CartContext
);
返回(
{bookName}
作者：{By}
{
removeItem（id）；
}}
>
去除
{
增加金额（id）；
}}
>
{amount}
{
减少金额（id、金额）；
}}
>
{正规价格}
);
}

结帐

import React,{useContext} from 'react'
import { CartContext } from '../../context/cart'
import {Link, useHistory } from 'react-router-dom'
import EmptyCart from './EmptyCart';

const Checkout = () => {
  const history = useHistory()
  const {cart, total} = useContext(CartContext)
  if (cart.length === 0) {
    return <EmptyCart />;
  }

    return (
        <div className='checkout'>
            <h2>Summary</h2>
            <h2>Subtotal : ${total}</h2>
            <Link to='/stripecontainer' className='checkout__btnOne'>Proceed to Checkout</Link>            
        </div>
    )
}

export default Checkout

import React，{useContext}来自“React”
从“../../context/cart”导入{CartContext}
从“react router dom”导入{Link，useHistory}
从“/EmptyCart”导入EmptyCart；
常量签出=（）=>{
const history=useHistory（）
const{cart，total}=useContext（CartContext）
如果（cart.length==0）{
返回；
}
返回(
总结
小计：${total}
继续结帐
)
}
导出默认签出

您的问题在于newTotal计算函数，cartItem持有RegularPrice属性而非price属性

更改此项：

let newTotal = cart.reduce((total, cartItem) => {
      return (total += cartItem.amount * cartItem.price);

为此：

let newTotal = cart.reduce((total, cartItem) => {
      return (total += cartItem.amount * cartItem.RegularPrice);

购物车项目属性：

CartItem({
  id,
  image,
  bookName,
  RegularPrice,
  by,
  amount
})

工作沙箱：