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

Question

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

这是我的 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>
    </>
  )
}

Answer 1

问题

问题似乎是状态突变。当您找到匹配的产品并设置 quantity 属性时，您正在改变产品对象，并且由于对象仍然是浅引用，因此 React 放弃了重新渲染它。这就是您看到陈旧 UI 的原因。

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

此外，如果找不到匹配的产品项目，Array.prototype.find 方法可能会返回 undefined，如果发生这种情况，您的代码将在尝试访问 quantity 或 undefined 时抛出错误。

您还有一些关于将数量增加/减少 1 的奇怪逻辑。只需从数量中添加/减去 1。

解决方案

浅拷贝所有正在更新的状态。

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

修复按钮回调。让amount 成为添加到数量中的内容。

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

Answer 2

而不是将值设置为按钮并读取它并使用附加函数来递增和递减。我们可以这样做

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

有了这个你可以删除额外的valueCal和decrement函数。

另外，如果你有一个 id 键，那么你应该考虑使用它，而不是基于 item.name === product.name 进行比较，这是一个很好的做法 item.id === product.id 。

然后最后设置状态，您可以使用@Drew Reese 或@Dani 建议的方法。

Answer 3

当状态发生变化时，React 将呈现购物车的更新状态。您必须向购物车组件添加一个增加或减少的状态。 例如，

  this.state={item: 1}

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

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

产品数量的增加或减少通常是用户输入。当用户按下“添加到购物车按钮”时，第一个产品将添加一个数量。

Answer 4

试试

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

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