Javascript 无法增加或减少我的数量值

因此，我正在构建一个购物车，我已经完成了大部分代码，但当我尝试从购物车中增加或减少产品数量的值时，它只会获取当前数量的值，而不会更新。 我无法理解我在哪里犯了错误

这是我的cart.js文件

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';


export default function Cart({ cart, setCart }) {
  const getTotalSum = () => {
    return cart.reduce(
      (sum, { cost, quantity }) => sum + cost * quantity,
      0
    );
  };
  const RemoveFromCart = productToRemove => {
    setCart(cart.filter(product => product !== productToRemove));
  };
  const clearCart = () => {
    setCart([])
  }

  const setQuantity = (product, amount) => {
    const newCart = [...cart];
    newCart.find(item => item.name === product.name)
      .quantity = amount;
    setCart(newCart)
  };

  let valueCal =(v)=>{
    console.log(v)
    return v++
  }
  let decrement =(v)=>{
    console.log(v)
    return v--
  }


  return (
    <>
      <h1>Cart</h1>
      {cart.length > 0 && (<button onClick={clearCart}>Clear Cart</button>)}
      <div className="products">
        {cart.map((product, idx) => (
          <div className="product" key={idx}>
            <h3>{product.name}</h3>
            <h4>RS: {product.cost}</h4>
            
            <img src={product.image} alt={product.name} />
            Quantity: {product.quantity}
            <button
              value={product.quantity}
              onClick={(e) =>
                setQuantity(
                  product,
                  parseInt(valueCal(e.target.value))
                )
              }
            >Add</button>
            <button
              value={product.quantity}
              onClick={(e) =>
                setQuantity(
                  product,
                  parseInt(decrement(e.target.value))
                )
              }
            >
              Drop
            </button>
            <button onClick={() => RemoveFromCart(product)}>
              Remove
        </button>
          </div>
        ))}
      </div>
      <div>
        Total cost: Rs: {getTotalSum()}
      </div>
    </>
  )
}

从“React”导入React
导入'bootstrap/dist/css/bootstrap.min.css'；
导出默认功能购物车（{Cart，setCart}）{
常量getTotalSum=（）=>{
返回购物车。减少(
（总和，{成本，数量}）=>总和+成本*数量，
0
);
};
const RemoveFromCart=productToRemove=>{
setCart（cart.filter（product=>product！==productToRemove））；
};
常量clearCart=（）=>{
setCart（[]）
}
常量设置数量=（产品、金额）=>{
const newCart=[…cart]；
newCart.find（item=>item.name==product.name）
.数量=金额；
setCart（newCart）
};
设valueCal=（v）=>{
控制台日志（v）
返回v++
}
让减量=（v）=>{
控制台日志（v）
返回v--
}
返回(
运货马车
{cart.length>0&（清除购物车）}
{cart.map（（产品，idx）=>(
{product.name}
RS:{product.cost}
数量：{product.Quantity}
设定量(
产品,，
parseInt（valueCal（如target.value））
)
}
>加
设定量(
产品,，
parseInt（减量（如目标值））
)
}
>
滴
RemoveFromCart（产品）}>
去除
))}
总成本：Rs:{getTotalSum（）}
)
}

试试看

我认为查找结果是不可变的

试试看

我认为查找结果是不可变的

问题 问题似乎是国家突变。当您找到一个匹配的产品并设置

quantity

属性时，您正在对产品对象进行变异，并且由于对象仍然是浅引用对象，因此在重新提交它时会对其进行响应。这就是为什么您会看到陈旧的UI

const setQuantity = (product, amount) => {
  const newCart = [...cart];
  newCart.find(item => item.name === product.name).quantity = amount; // mutation
  setCart(newCart)
};

此外，如果没有找到匹配的产品项，

Array.prototype.find

方法可能会返回

undefined

，如果出现这种情况，则代码在尝试访问

undefined

的

数量时会抛出错误

你也有一些奇怪的逻辑，将数量增加/减少1。只需在数量上加/减1即可

<button onClick={(e) => setQuantity(product, 1)} >
  Add
</button>
<button onClick={(e) => setQuantity(product, -1)} >
  Drop
</button

解决方案
浅层复制正在更新的所有状态

const setQuantity = (product, amount) => {
  setCart(cart => cart.map(item => item.name === product.name ? {
    ...item,
    quantity: item.quantity + amount
  } : item));
};

修复按钮回调。只需将
金额
添加到数量中即可

<button onClick={(e) => setQuantity(product, 1)} >
  Add
</button>
<button onClick={(e) => setQuantity(product, -1)} >
  Drop
</button

setQuantity（产品，1）}>
添加
设置数量（产品-1）}>
滴
问题
问题似乎是国家突变。当您找到一个匹配的产品并设置
quantity
属性时，您正在对产品对象进行变异，并且由于对象仍然是浅引用对象，因此在重新提交它时会对其进行响应。这就是为什么您会看到陈旧的UI

const setQuantity = (product, amount) => {
  const newCart = [...cart];
  newCart.find(item => item.name === product.name).quantity = amount; // mutation
  setCart(newCart)
};

此外，如果没有找到匹配的产品项，
Array.prototype.find
方法可能会返回
undefined
，如果出现这种情况，则代码在尝试访问
undefined
的
数量时会抛出错误

你也有一些奇怪的逻辑，将数量增加/减少1。只需在数量上加/减1即可

<button onClick={(e) => setQuantity(product, 1)} >
  Add
</button>
<button onClick={(e) => setQuantity(product, -1)} >
  Drop
</button

解决方案
浅层复制正在更新的所有状态

const setQuantity = (product, amount) => {
  setCart(cart => cart.map(item => item.name === product.name ? {
    ...item,
    quantity: item.quantity + amount
  } : item));
};

修复按钮回调。只需将
金额
添加到数量中即可

<button onClick={(e) => setQuantity(product, 1)} >
  Add
</button>
<button onClick={(e) => setQuantity(product, -1)} >
  Drop
</button

setQuantity（产品，1）}>
添加
设置数量（产品-1）}>
滴
而不是将值设置到按钮并读取它，然后使用附加函数进行递增和递减。我们可以这样做

<button onClick={(e) => setQuantity(product, product.quantity + 1)}>
    Add
</button>
<button onClick={(e) => setQuantity(product, product.quantity - 1)}>
    Drop
</button>

setQuantity（product，product.quantity+1）}>
添加
设置数量（product，product.quantity-1）}>
滴

使用此功能，您可以删除附加的
valueCal
和
减量
功能

也不做基于<代码> > iName .Name＝＝＝乘积.Name < /代码>的比较，如果您有一个<代码> ID 密钥，那么您应该考虑使用它，这是一个好的实践“代码> It.ID=＝产品，ID  
最后，对于设置状态，您可以使用@Drew Reese或@Dani建议的方法。
而不是将值设置到按钮并读取它，然后使用附加的函数进行递增和递减。我们可以这样做

<button onClick={(e) => setQuantity(product, product.quantity + 1)}>
    Add
</button>
<button onClick={(e) => setQuantity(product, product.quantity - 1)}>
    Drop
</button>

setQuantity（product，product.quantity+1）}>
添加
设置数量（product，product.quantity-1）}>
滴

使用此功能，您可以删除附加的
valueCal
和
减量
功能

也不做基于<代码> > iName .Name＝＝＝乘积.Name < /代码>的比较，如果您有一个<代码> ID 密钥，那么您应该考虑使用它，这是一个好的实践“代码> It.ID=＝产品，ID  
最后，对于设置状态，您可以使用@Drew Reese或@Dani建议的方法。
当状态发生变化时，React将呈现更新的购物车状态。您必须向购物车组件添加增加或减少的状态。
比如说,

  this.state={item: 1}

创建一个更新单击事件状态的函数

this.setstate({item: this.state.item + 1})

产品数量的增加或减少通常由用户输入。当用户按下“添加到购物车”按钮时，第一个产品将添加一个数量。
当状态发生变化时，React将呈现购物车的更新状态。您必须向购物车组件添加增加或减少的状态。
比如说,

  this.state={item: 1}

创建一个更新单击事件状态的函数

this.setstate({item: this.state.item + 1})

产品数量的增加或减少通常是用户输入。第一个产品将添加一个