javascript - 为什么在 React 购物车中更改商品数量时总价计算不起作用？

Question

我无法总结我的 React 购物车中物品的总成本。我使用了 reduce 方法，但是在我当前的代码中，当您将商品添加到购物车并重定向到结账total时，NaN除非我弄乱数量，否则它会出现问题，即使那样它也是错误的。将不胜感激任何帮助。

结帐.js：

import React, { useContext, useEffect, useState } from "react";
import { Context } from "../../Context";
import CartItem from "../Cart/CartItem";

function Checkout() {
  const { cartItems } = useContext(Context);

  let total = cartItems.reduce((sum, { qty, price }) => sum + price * qty, 0); //calculate total

  const numberOfItems = cartItems.length === 1 ? `1 item` : `${cartItems.length} items`;

  return (
    <div>
      {cartItems.map(item => (
        <CartItem cartItems={cartItems} item={item} key={item.id} />
      ))}
      <p>
        {cartItems.length === 0
          ? "Cart is Empty."
          : `You have ${numberOfItems} in your cart.`}
      </p>
      <h1>Total: ${total}</h1> //appears as NaN on render
    </div>
  );
}

export default Checkout;

示例产品对象：

    {
      id: 1,
      url: "https://picsum.photos/id/30/200/300",
      itemName: "Mug",
      itemDescription: "Lorem ipsum dolor sit amet",
      price: 5,
    }

CartItem.js

import React, { useContext } from "react";
import "./cart.css";
import { Context } from "../../Context";

function CartItem({ item }) {
  const { increaseQty } = useContext(Context);

  item.qty = 1; //assign quantity key to product object

  const options = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  const dropDown = options.map(x => {
    return <option key={x}>{x}</option>;
  });

  return (
    <div className="cart-item-container">
      <img src={item.url} className="cart-img" />
      <span>
        {item.itemName}-{item.price}$
      </span>
      <select onChange={e => increaseQty(item, e.target.value)}>
        {dropDown}
      </select>
    </div>
  );
}

export default CartItem;

当我更改购物车中多个项目的数量时，会出现该错误，它正在扔掉一些东西。

  function increaseQty(product, amount){
    cartItems.find(item => item.itemName === product.itemName).qty = amount;
    setQty(amount);
  };

标签： javascriptreactjs