如何在反应渲染上保持常量变量

Question

我陷入了反应问题。 我在反应中创建了一个在线商店（前端）网站

const products = [
  { id: 1, name: "Oppo", price: 200, unit: 1, img: "oppo.jpg" },
  { id: 2, name: "Samsung", price: 250, unit : 1, img:, "samsung.jpg" },
  { id: 3, name: "Vivo", price: 150, unit : 1, img: "vivo.jpg" }
];

/* const addToCart = (items) => { 
    setCartItem((cartItem) => [...cartItem, items])
    console.log(cartItem)
  }

function to add data in array to cartItem state

 */

const [cartItem, setCartItem] = usestate([])


    const addQuantity = (id) => {
    const updateItem = cartItem.map((item) => {
      if (item.id === id) {
        return { ...item, unit: item.unit + 1, price: unit * item.price };
      }
      return item;
    });
    setCartItem(updateItem);
  };

    const reduceQuantity = (id) => {
        const updateItem = cartItem.map((item) => {
      const updateUnit = item.unit - 1;
      if (item.id === id && item.unit > 1) {
        return { ...item, unit: updateUnit, price: item.price / item.unit };
      }
      return item;
    });
    setCartItem(updateItem);
    }

 <div>
            {cartItem.map((item) => {
                return(
                    <div>
                        <button onClick={()=>addQuantity(item.id)}>+</button>
                        <img src={item.IMG} alt="" />
                        <h3 className="name">{item.product}</h3>
                        <p className="price">{item.price}</p>
                        <p className="quantity">{quantity}</p>
                        <button onClick={()=>reduceQuantity(item.id)}>-</button>
                    </div>
                )
            })}
        </div>

vivo初始单位为1，价格为150 当我点击addQuantity按钮时，单位变成了2，但由于初始单位是1，价格仍然是150（1 * 150）。我再补充一下，单位是3，价格是300（2 * 150），应该是450。

如何保持初始值不改变，以便函数给出正确的结果？

拜托，我被这个问题困扰了

Answer 1

您正在返回

{ ...item, unit: item.unit + 1, price: unit * item.price };

，这意味着您正在向

unit

属性添加 1，但在计算

price

时并未添加它。

假设是

item.unit = 3

，意思是

unit: 3 + 1, price: 3 * item.price

，而应该是

price: (3+1) * item.price

。

另外，我认为你有一个拼写错误，

price: unit * item.price

应该是

price: item.unit * item.price

。

也就是说，计算时还需要加一

price

{ ...item, unit: item.unit + 1, price: (item.unit + 1) * item.price };