Метод группировки. Не группируется новый элемент

Question

При клике на кнопку элемента, функция добавляет этот элемент в корзину. Т.е. в компоненте App при клике работает функция addItemToCart, которая закидывает кликнутый элемент в массив cartData. addItemToCart вызывается в useEffect, который находится в компоненте Sweetsmap и реагирует на изменения состояния isClicked. addItemToCart принимает cartObj, который тоже находится в компоненте Sweetsmap.

const cartObj = getCartObj({ id, sweet, price, quantity })

getCartObj возвращает объект внутри которого id и остальные элементы кликнутого элемента.

import React from "react";

const dataCart = {
    sweets: [],
    carts: [],
}
export const ThemeContext = React.createContext(dataCart)
function App() {
    const [cartData, setCartData] = React.useState(dataCart.carts);

    const addItemToCart = (obj) => {
        if (!obj) return
        if (cartData.length == 0) { setCartData([obj]) }
        if (cartData.length > 0) {
            const groupedItems = Object.groupBy(cartData, ({ id }) => id)
            const totalAmountItemss = Object.values(groupedItems).map((itemss) => {
                const items = itemss.reduce((acc, { items }) => items + acc, 0)
                const price = itemss.reduce((acc, { price }) => price + acc, 0)
                return { ...itemss[0], items, price }
            });
            setCartData([obj, ...totalAmountItemss])
        }
    }
}

Компонента Sweetsmap

export const Sweetsmap = ({ id, sweet, price, quantity }) => {
    const [isClicked, setIsClicked] = React.useState(1)

    React.useEffect(() => {
        if (isClicked == 1) return
        const cartObj = getCartObj({ id, sweet, price, quantity })
        addItemToCart(cartObj)

        updateAnDGetSweet(id, sweetObj)
    }, [isClicked])
    const getCartObj = () => {
        return { id, sweet, price, items: 1 }
    }
    const clickHandler = () => {
        setIsClicked(isClicked + 1)
    }
}

Проблема в том что когда кликаешь на определенный товар 6 раз, элемент делится на два объекта вместо одного объекта с 6-ю items.

Или когда кликаешь на другой товар 4 раза происходит тоже самое, только прежний объект соединяется.

Answer 1

Вам необходимо убрать добавление нового элемента в финальный массив

Заменить setCartData([obj, ...totalAmountItemss]) на setCartData([...totalAmountItemss])

Что бы новый объект учитывался при группировке, его надо добавить в исходный массив.

Так же, что бы избежать неожиданного поведения при обновлении состояния, лучше работать не с "текущим" состоянием, а с "предыдущим"

const addItemToCart2 = (obj) => {
    if (!obj) return;
    setCartData(prev => {
        prev.push(obj);
        return Object.values(Object.groupBy(prev, ({ id }) => id))
            .map((itemss) => {
                const items = itemss.reduce((acc, { items }) => items + acc, 0)
                const price = itemss.reduce((acc, { price }) => price + acc, 0)
                return { ...itemss[0], items, price }
            })
    });
}

БЛОГ НА HUSL

Метод группировки. Не группируется новый элемент

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