为什么购物车增量无法正常工作？

Question

我需要增加或减少购物车中的商品数量，但是当我单击特定商品的增加按钮时，它会增加购物车中所有商品的数量。下面是我的代码，我做错了什么？

 const [items, setItems] = useState(existingCartArray);
  const [quantity, setQuantity] = useState(1);

  const handleAdjustQuantity = (itemId, newQuantity) => {
    // Update the quantity of the item with the given itemId
    const updatedItems = items.map((item) =>
      item.id === itemId ? { ...item, quantity: newQuantity } : item
    );
    setItems(updatedItems);
    setQuantity(newQuantity);
  };

 return (
    <Modal show={show} onHide={onHide}>
      <Modal.Header closeButton>
        <Modal.Title>Receipt</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        {(existingCartArray).map((item) => (
          <div  key={item.id}>
          
              <div key={item.id} style={{display:'flex', justifyItems:'left', padding:'0em 0em 0em 1em'}}>
              <Button variant="danger" style={{fontSize:'.6em', height:'30px'}} onClick={() => handleRemoveItem(item.id)}>Remove</Button>
              <div style={{display:'flex', padding:"0em 0em 0em 10em"}}>
              <Button variant="primary" onClick={() => handleAdjustQuantity(item.id, quantity + 1)}>+</Button>
              <span> {quantity}</span>
              <Button variant="primary" onClick={() => handleAdjustQuantity(item.id, quantity - 1)}>-</Button>
              </div>
            
              </div>
          </div>
    
            
        ))}
      </Modal.Body>
    </Modal>
  );

Answer 1

当我单击特定项目的增量按钮时，它会增加 购物车中所有商品的数量。

这是因为您已经实现了一个

quantity

状态，用于从 递增，并且 为

items

数组中的每个项目元素呈现。

您似乎正在更新数组中每个项目的

quantity

属性，因此请更新逻辑以增加特定项目的

quantity

属性并呈现此属性。删除

quantity

状态，因为您不再需要它。

const [items, setItems] = useState(existingCartArray);

const handleAdjustQuantity = (itemId, amount) => {
  setItems(items => items.map((item) =>
    item.id === itemId
      ? {
        ...item,
        quantity: item.quantity + amount
      } : item
  ));
};

return (
  <Modal show={show} onHide={onHide}>
    <Modal.Header closeButton>
      <Modal.Title>Receipt</Modal.Title>
    </Modal.Header>
    <Modal.Body>
      {items.map((item) => (
        <div key={item.id}>      
          <div
            style={{
              display: 'flex',
              justifyItems: 'left',
              padding: '0em 0em 0em 1em'
            }}
          >
            <Button
              variant="danger"
              style={{ fontSize: '.6em', height: '30px' }}
              onClick={() => handleRemoveItem(item.id)}
            >
              Remove
            </Button>
            <div style={{ display: 'flex', padding: "0em 0em 0em 10em" }}>
              <Button
                variant="primary"
                onClick={() => handleAdjustQuantity(item.id, 1)}
              >
                +
              </Button>
              <span>{item.quantity}</span>
              <Button
                variant="primary"
                onClick={() => handleAdjustQuantity(item.id, -1)}
              >
                -
              </Button>
            </div>
          </div>
        </div>
      ))}
    </Modal.Body>
  </Modal>
);