Arrays 更新react中对象列表的某些属性

我想将

addItem

添加到

cartItems

列表中，但是如果

id

与

cartItems

中已有的项目相同，我不想添加另一个对象，相反，它会将以前的

amountPrice

和

orderAmount

与新对象一起添加

我有办法做到这一点吗

const [cartItems, setCartItems] = useState(cartLocalStorage());

const addToCart = (id, name, image, amountPrice, orderAmount) => {
    const addItem = {
      id: id,
      name: name,
      image: image,
      amountPrice: amountPrice,
      orderAmount: orderAmount,
    };
    setCartItems([...cartItems, addItem]);
  };
};

---

我还没有测试过它，可能不起作用，但希望它能为您指引正确的方向：

const [cartItems, setCartItems] = useState(cartLocalStorage());

const addToCart = (id, name, image, amountPrice, orderAmount) => {
    const addItem = {
        id: id,
        name: name,
        image: image,
        amountPrice: amountPrice,
        orderAmount: orderAmount,
    };
    const index = cartItems.findIndex(item => item.id === id);
    if (index !== -1) {
        cartItems[index] = {...cartItems[index], ...addItem};
        setCartItems(cartItems);
    } else {
        setCartItems([...cartItems, addItem]);
    }
};

干杯

试试看：

const addToCart = (id, name, image, amountPrice, orderAmount) => {
    if(cartItems.find(i => i.id === id)){
        setCartItems(cartItems.map(item => {
            if(item.id === id){
                item.amountPrice += amountPrice;
                item.orderAmount += orderAmount;
            }
            return item;
        }));
    }else{
        setCartItems([...cartItems, {id, name, image, amountPrice, orderAmount}]);    
    }
}

addToCart

将通过

id

检查项目是否已在

cartItems

中，如果已在

id

中，则将

amountPrice

和

orderAmount

的值添加到现有元素的相应值中

---

但是，如果id不在

cartItems

中，它将向数组中添加一个新元素。

此部分有点不清楚，相反，它将使用新元素添加以前的amountPrice和orderAmount。您能详细说明一下吗？因此，在新数据存储到数组中之前，它首先会检查id是否已经存在，这意味着它不会创建另一个对象，而是只更改其他两个关键属性amountPrice和orderAmount。它不会覆盖它，但它会添加新值，即旧值+新值的总和。谢谢它的工作，但我有一个问题。为什么在这种情况下使用

find（）

而不是

filter（）

？@BaBi我认为在这种情况下使用

find

更直观一些。我当然可以使用

filter

，结果是一样的，但是

filter

通常用于需要返回多个数组项的情况。因为我知道只有一个可以匹配

id

，

find

看起来更适合可读性。哦，现在我理解了这些概念，谢谢你，我从你那里学到了很多。