Алгоритм работы корзины в React с помощью хука useState

Question

Проходил собеседование, не смог решить задание, надо было доделать алгоритм чтобы можно было добавлять и убирать товары из корзины. Решил доделать и разробраться но всеравно возникают вопросы.

Если у нас есть товар уже в корзине как сделать что при добавлении того-же товара менялась только его количевство
В списке добавленых товаров в корзину есть кнопки уменьшения и добавления. Чтобы количевство увеличивалось я сделал, с убавлением проблемы, как количество товара равно 1 я пытаюсь сделать чтобы он исчезал (через filter) но оно не работает.
Вся сума всех продуктов вместе считается в отдельном компоненте Total, как правильно реализовать чтобы при изменении массива сума тоже правильно считалось?
Там где у меня стоит @ts/ignore почему у меня ругается TypeScript?

Чтобы пост не был большим я оставлю ссылку на проект

ShoppingCart - Родительський компонент, грубо говоря обвертка
AddItemForm.tsx - форма для добавления продуктов
ItemsList.tsx - Корзина
Total.tsx - компонент подсчета сумы всех продуктов

Заранее благодарю всех кто откликнется. Да знаю многие скажут возьме сделай с помощью useContext или Redux, но на собеседовании дали сделать с помощью useState и меня интересует как следоало бы мне сделать это тогда.

Answer 1

interface IItem {
    id: string;
    name: string;
    count: number;
}

const [items, setItems] = useState<Array<IItem>>([]);

    const handleAddItem = (newItem: IItem) => {
        setItems(prev =>
            prev.find(item => item.id === newItem.id)
                ? prev.map(item => ({
                        ...item,
                        count: item.id === newItem.id ? item.count + 1 : item.count,
                  }))
                : [...prev, newItem],
        );
    };

    const handleRemoveItem = (newItem: IItem) => {
        setItems(prev =>
            prev.find(item => item.id === newItem.id)?.count === 1
                ? prev.filter(item => item.id !== newItem.id)
                : prev.map(item => ({
                        ...item,
                        count: item.id === newItem.id ? item.count - 1 : item.count,
                  })),
        );
    };

    const total = items.reduce((acc, item) => acc + item.count, 0);

БЛОГ НА HUSL

Алгоритм работы корзины в React с помощью хука useState

Ответы (1 шт):