Javascript 总计在购物车中显示NaN

所以我现在面临的问题是这个。我在CartContext中有一个Cart逻辑。除了位于Checkout组件中的total之外，所有东西都可以工作，它应该合计购物车中所有商品的价格，但实际上是显示NAN。这里是指向CodeSandbox的链接，如果sandbox出现问题，可以更好地理解注释

购物车上下文

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}
继续结帐
)
}
导出默认签出

您正在处理坏数据。在这种情况下，正确的响应是向负责后端的人请求经过净化的数据。如果后端的负责人仍然是您，您应该在后端而不是前端解决此问题

长话短说，不要使用

parseFloat（）

。当您必须将字符串转换为数字时，更安全的方法是使用

Number（val）

（或其缩写：

+val

）。（不过，这仍然是一个赌注……）

另一件小事：您正在向购物车添加金额为0的物品。它不应该是

1

setCart(
  cart.concat({
    amount: 1,
    price: +book.RegularPrice,
    ...book
  })
);

最后一点注意：如果

book

已经设置了这些属性，那么您现在拥有的将覆盖对

amount

和

price

的分配。如果希望对指定具有完全控制（和信心），应首先展开对象，然后指定：

setCart(
  cart.concat({
    ...book,
    amount: 1,
    price: +book.RegularPrice
  })
);

---

看看。

这回答了你的问题吗？似乎在沙箱中工作？请不要继续反复发布相同的问题。如果您有新信息，请编辑原始问题。我不知道它在您的沙盒中如何工作，当在我的沙盒中显示NaNMy sandbox时，我的沙盒正在工作，但我必须在一个项目上单击两次才能算作金额1。