需要在我的反应状态对象上添加数量

Question

我遇到了一个问题，我正在用一个对象数组更新 React 状态，我的原始对象是这样的。

[{id:"123", name:"Product 1"}, {id:"456", name:"Product 2"}];

假设这是一个电子商务购物车列表，现在如果我再次添加相同的产品，'id' 属性对于每个产品都是唯一的，它应该会增加该产品的数量。

我需要这个[[{id:"123", name:"Product 1 , quantity: 2"}, {id:"456", name:"Product 2"}];]

相反，我得到这样的状态， [{id:"123", name:"Product 1"}, {id:"456", name:"Product 2"},{id:"123", name:"Product 1"} ];

我不希望数组中的第三项，我希望它增加数量属性，这在之前的对象上也是不可用的。

我正在使用 React hooks

请帮忙。提前致谢。

Answer 1

您需要根据id在cart数组中找到商品的索引，然后更新数量，或者设置为1作为初始值。

我添加了一个小示例，但您可以将其改编为挂钩代码。

let cart = [{id:"123", name:"Product 1"}, {id:"456", name:"Product 2"}];
let newCart = JSON.parse(JSON.stringify(cart))
let index = newCart.findIndex(obj => obj.id === "123")

if (index >= 0) {
 newCart[index].quantity = (newCart[index].quantity | 0) + 1     
}

console.log(newCart)

Answer 2

使用 map() 遍历现有状态并在 id 与输入匹配时更新对象。

const state = [
  { id: "123", name: "Product 1" },
  { id: "456", name: "Product 2" },
];

setState = (_state) =>
  state.map((item) =>
    item.id === _state.id
      ? { ...item, quantity: item["quantity"] + 1 || 2 }
      : item
  );

const newState = setState({ id: "123", name: "Product 1" });

console.log(newState);

Answer 3

我在发布问题后尝试了这个，它成功了。

const addToCart = (productToAdd) => {
    const present = cartItem.some((prod) => {
      return prod.id === productToAdd.id;
    });
    if (!present) {
      productToAdd["quantity"] = 1;
      setcartItem((prev) => {
        return [...prev, productToAdd];
      });
    } else {
      setcartItem((prev) => {
        prev.map((prod) => {
          if (prod.id === productToAdd.id) {
            prod.quantity++;
          }
        });
        return [...prev];
      });
    }
  };

需要在我的反应状态对象上添加数量

Need to add quantity on my react state object

reactjs

react-hooks

use-state