如何在 React 中更改个人购物车数量？

Question

我正在构建一个基本的购物车示例，它有 2 个按钮，addtoCart 用于计算总金额和 Quantity 用于更新数量。但是当我点击它时，所有产品的数量都会立即更新。我该如何为特定产品做这件事？

import React,{useContext, useState, useReducer, useEffect} from 'react'

const Wishlist=()=>{

  const product=[
    { name: "Apple", price: 10 },
    { name: "Banana", price: 20 },
    { name: "Cherry", price: 30 }
  ]

  const [total,setTotal]=useState(0)
  const [qty,setQty]=useState(1)

  const handleClick = e => {
    setTotal(prevState=>prevState+e)
  };

  const handleQty=e=>{
    setQty(prevState=>prevState+1)

  }
    return(
        <div>
      {product.map((p)=>
      <li key={p.name}>{p.name}{p.price}
      <button onClick={()=>handleClick(p.price)}>Add to cart</button>
      <button onClick={()=>handleQty(p)}>x{qty}</button>

      </li>)
      }
      Price: {total}
      
        </div>
    )
}

export default Wishlist

有没有办法让多次点击“添加到购物车”按钮也更新单个数量并计算总金额？我好像想不通。

[编辑] 现在我也添加了一个单位属性，所有数量仍然会立即更新。这是代码：

import React,{useContext, useState, useReducer, useEffect} from 'react'

const Wishlist=()=>{

  const product=[
    { name: "Apple", price: 10,unit:1},
    { name: "Banana", price: 20,unit:1 },
    { name: "Cherry", price: 30,unit:1 }
  ]

  const [total,setTotal]=useState(0)
  const [qty,setQty]=useState(1)

  const handleClick=e=>{
    setTotal(prevState=>prevState+e.price),
    setQty(e.unit+1)
    console.log(e)
  };

    return(
        <div>
      {product.map((p)=>
      <li key={p.name}>{p.name}{p.price}
      <button onClick={()=>handleClick(p)}>Add to cart </button>
      &nbsp;{qty}

      </li>)
      }
      Price: {total}
      
        </div>
    )
}

export default Wishlist

Answer 1

您可以将产品及其数量存储在状态中，并在点击时相应地进行更新。

const [products, setProducts]= useState([
    { name: "Apple", price: 10, quantity:0 },
    { name: "Banana", price: 20, quantity:0 },
    { name: "Cherry", price: 30, quantity:0 }
  ]);
const [total,setTotal]=useState(0);

const handleClick = (product = {}) => {
    // update quantity
    const newProducts = [
        ...products,
        {...product,
        quantity: product.quantity+1}
    ];
    // update total
    setTotal(total+product.price)
}

return (
    <div>
        {products.map((p) => (
             <li key={p.name}>{p.name}{p.price}
             <button onClick={()=>handleClick(p)}>Add to cart</button>
             <button onClick={()=>handleQty(p)}>x{p.quantity}</button>
             </li>
        ))}
    </div>
)

Answer 2

你的 total 没问题，但你的 quantity 不行 - 你不能指望它用一个数字来代表你的个人数量。您可以将它们存储在 products 对象中（见下文）或将其设为数组（我认为这是一种更糟糕的方法）。


handleClick = (p) => {
    setTotal(prevState=>prevState+p.price);
    let product = products.find((pr) => pr.name === p.name);
    product.unit += 1;
    const updatedProducts = products.map(p => {
        if (product.name === p.name) return product;

        return p;
    });

    setProducts(updatedProducts);
}

如何在 React 中更改个人购物车数量？

How to change individual cart quantity in React?

event-handling

reactjs

react-hooks