Как я могу изменить значение объекта в массиве в React redux при вызове действия?

Question

Это действие, которое при вызове получает идентификатор, чтобы он мог фильтровать объект с тем же идентификатором в редукторе.

export const buyItem = (24) => {
    return {
        type: BUY_ITEM,
        payload: 24
    };
};

Это массив продуктов в файле редуктора

    products: [
        {
            id: 1,
            price: 4500000,
            number: 0,
            inCart: false
        },
        {
            id: 24,
            price: 7210000,
            number: 0,
            inCart: false
        },
        {
            id: 10,
            inCart: false,
            category: 'electronics',
            number: 0,
        }
]

Это случай действия редуктора, в котором я фильтрую фильтр продукта, а затем пытаюсь обновить inCart и его числовое значение

    switch (action.type) {
        case BUY_ITEM:
            let item = state.products.filter((item) => {
                if (item.id === action.payload) {
                    return item;
                }
            });

            console.log(state.products);

            return {
                ...state,
                productsInCart: state.productsInCart + 1,
                cartPrice: state.cartPrice + item[0].price,
                products: [
                    ...state.products,
                    state.products.map((item) => {
                        if (item.id === action.payload) {
                            item.inCart = true;
                            item.number += 1;
                        }
                    })
                ]
            };

Проблема в том, что он не делает это должным образом, он на самом деле успешно меняет значения объекта, но когда журнал консоли появляется после выполнения действия, он показывает мне следующее:

21: {id: 19, nam, number: 0, …}
22: {id: 22,  number: 0, …}
23: {id: 23, n,…}
24: {id: 25, name: "Adidas کیف", pric دهید", number: 0, …}
25: (25) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
26: (26) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
27: (27) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
28: (28) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
29: (29) [undefined, undefined, undefined, undefined, {…}, undefined, undefined, undefined, undefined,  undefined, undefined]
30: (30) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
31: (31) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, {…}, undefined, undefined, undefined, undefined]

Это в основном добавляет несколько нулевых массивов в конец массива продуктов, что, как я вижу, не то, что я хочу. Как правильно обновить значение объекта в массиве при вызове действия?

Answer 1

Продукты копируются (распространяются) обратно в себя, а затем в него также вкладываются сопоставленные продукты (неопределенные значения возникают из-за того, что не возвращаются / не отображаются новые значения). Вы можете просто установить для новых продуктов сопоставленный массив продуктов.

products: state.products.map((item) => {
    const newItem = { ...item }; // copy item
    if (item.id === action.payload) { // update if id matches
      newItem.inCart = true;
      newItem.number += 1;
    }
    return newItem; // return copied item
  })