Обновить определенное свойство списка объектов в react

#arrays #reactjs #react-hooks

#массивы #reactjs #реагирующие хуки

Вопрос:

Я хочу добавить объект 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]);
  };
};

1. Эта часть немного неясна, вместо этого она добавит предыдущую amountPrice и orderAmount с новым . Можете ли вы уточнить?

2. поэтому, прежде чем новые данные будут сохранены в массиве, сначала он проверит, есть ли уже идентификатор, что означает, что он не создаст другой объект, а изменит только 2 других ключевых свойства, amountPrice и orderAmount. И он не перезапишет его, но добавит новое значение, которое является суммой старого значения нового значения

Ответ №1:

Попробуйте это сделать:

 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 проверит, находится ли элемент уже в cartItems by id , и если да, добавит значения amountPrice и orderAmount к соответствующим значениям существующего элемента.

Если, однако, идентификатор отсутствует cartItems , он добавит новый элемент в массив.

1. спасибо, это работает, но у меня есть вопрос. Почему вы использовали find() not filter() в этом случае?

2. @BaBi Я думаю, что использование find в этом контексте немного более интуитивно понятно. Я, конечно, мог бы использовать filter , и результат был бы тем же, но filter обычно используется в ситуациях, когда вам нужно возвращать несколько элементов массива. Поскольку я знаю, что есть только один, который может соответствовать id , find он оказался более подходящим для удобства чтения.

3. о, теперь я понимаю эти понятия, спасибо, я многому научился у вас.

Ответ №2:

Я не тестировал его и, вероятно, не будет работать, но, надеюсь, направит вас в правильном направлении:

 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]);
    }
};

Приветствия