當調用動作時，如何在反應 redux 中更改數組中 object 的值？

Question

這是當它被調用時獲得一個 id 的操作，因此它可以在減速器中過濾具有相同 id 的 object。

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

這是reducer文件中的產品數組

    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;
                        }
                    })
                ]
            };

問題是它沒有正確執行它實際上成功地更改了 object 值但是當操作完成后控制台日志發生時它向我顯示：

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]

它基本上將多個 null arrays 添加到產品數組的末尾，這就是我所看到的不是我想要的。 調用操作時，如何正確更新數組中對象的值？

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
  })