Обновить объект внутри массива в useState
У меня есть это состояние cart, в котором начальное значение является пустым массивом [].
const [корзина, setCart] = useState ([]);
Вот так выглядит один из моих продуктов object,
{id: 1, name: 'Shoe pair', price: 40}
Для каждого товара есть кнопка add to cart. Поэтому при нажатии кнопки add to cart срабатывает функция addToCart,
const addToCart = (item) => {
let initialItem = {id: item.id, name: item.name, quantity: 1}
let existingItem = cart.filter(cartItem => item.id === cartItem.id);
if (existingItem.length > 0){
existingItem.quantity = existingItem.quantity + 1;
} else {
setCart(crr => [...crr, initialItem ]);
}
}
Что делает addToCart? Как вы можете видеть, это просто. Во-первых, он создает объект, устанавливая начальное количество на 1. Если тот же продукт уже присутствует в корзине, он обновляет количество в корзине продукта на 1, иначе начальный элемент добавляется в корзину .
Чтобы отслеживать это явление, я использовал useEffect крючок,
useEffect(() => {
console.info(cart);
}, [cart]);
Моя проблема в том, что я не вижу корзину в журнале консоли, когда количество обновляется на 1, но это показывает, когда initialItem помещается в корзину.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Первый вопрос: это find, а не filter.
Следующая проблема — изменение элемента внутри массива не сообщит React, что массив изменен, вам также необходимо повторно установить состояние после обновления существующего элемента.
const addToCart = (item) => {
const initialItem = { id: item.id, name: item.name, quantity: 1 };
const existingItem = cart.find((cartItem) => item.id === cartItem.id);
if (existingItem) {
existingItem.quantity += 1;
setCart((curr) => [...curr]);
} else {
setCart((curr) => [...curr, initialItem]);
}
};
Спасибо за ответ легко понять
Причина, по которой ваш useEffect не работает, когда вы думаете, что должна, заключается в том, что его зависимость не обновляется, когда вы думаете, что это так. Он запустится при вызове setCart и обновлении ссылки на cart, после чего вы увидите журнал консоли.
filter возвращает новый массив — исходный массив не изменяется.
документы -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
find возвращает элемент по ссылке, если он найден, иначе возвращает undeifined.
документы -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
Альтернативный пример:
const addToCart = (item) => {
const existingItem = cart.find(i => i.id === item.id)
const updatedCart = existingItem
? cart.map(i => {
return i.id === item.id ? {...i, quantity: i.quantity + 1} : i
})
: [...cart, item]
}
setCart(updatedCart)
}
существующийItem является массивом (поскольку он был создан с помощью cart.filter), поэтому у него нет свойства
.quantity.