Я работаю над добавлением/удалением товаров в корзину в моем проекте react js после добавления товаров в корзину. Я добавляю кнопки «-» и «+», которые при нажатии должны уменьшать/увеличивать количество товаров. Мне удалось добавить в корзину, увеличить работу, но я не могу понять, как удалить товар из корзины, когда количество становится равным 0. Пока это мой код:
const [items, setItems] = useState([]);
const handleDecrease = (id) => {
setItems((prevState) =>
prevState.map(
(item) =>
item.id === id
? item.qty !== 1
? { ...item, qty: item.qty - 1 }
: item.id !== id
: item // !id
)
);
};
{items?.map((item) => {
return (
<div
key = {item.id}
>
<div onClick = {() => handleDecrease(item.id)}>-</div>
<div>{item.title}</div>
<div> ${item.price * item.qty}</div>
<div>{item.qty}</div>
</div>
);
})}
В моей функции handleDecrease я проверяю, равно ли количество товара !==1, затем уменьшаю количество на 1; если количество равно 1 и снова нажимается «-», я хочу полностью удалить элемент из массива элементов, но мой код добавляет только false
в массив элементов. Как я могу удалить элемент?
Итак, что вы хотите, когда пользователь нажимает уменьшение:
Если значение свойства объекта (текущего) объекта qty больше единицы, уменьшите значение свойства объекта (текущего) объекта qty на единицу. В противном случае удалите объект элемента целиком. Или, что еще лучше, удалите объект элемента, значение свойства id которого соответствует (текущему) значению идентификатора свойства объекта элемента из массива элементов.
Есть несколько способов решить эту проблему, но самый простой — использовать вспомогательный массив:
const handleDecrease = (id) => {
const newItems = [];
items.map((item) => {
if (item.id === id) {
item.qty !== 1 && newItems.push({ ...item, qty: item.qty - 1 });
} else {
newItems.push(item);
}
});
setItems(newItems);
};
const handleDecrease = (id) => {
setItems((prevState) => {
const updatedState = { ...prevState };
const indexOf = updatedState.findIndex((elm) => elm.id === id);
if (indexOf > -1) {
updatedState[indexOf].qty > 0
? (updatedState[indexOf].qty -= 1)
: updatedState.splice(indexOf, 1);
}
return updatedState;
});
};
В дополнение к использованию карты вы можете использовать метод фильтра. Таким образом, вы можете упростить логику карты, уменьшив только количество, а затем запустить фильтр, который будет искать любой элемент с количеством равным 0 и удалять его из массива. Вы можете связать их вместе вот так.
const handleDecrease = (id) => {
setItems((prevState) =>
prevState.map(item => item.id === id ?
({...item, qty: item.qty - 1})
: item
).filter(item => {
return item.id === id ?
item.qty > 0
: true
}
)
)
;
};
Как сейчас написано, ваш ответ неясен. Пожалуйста, отредактируйте , чтобы добавить дополнительные сведения, которые помогут другим понять, как это отвечает на заданный вопрос. Вы можете найти больше информации о том, как писать хорошие ответы в справочном центре.