更改嵌套数组的状态时，Redux UI 不会更新

Question

我对 Redux 还很陌生。

我的 Web 应用程序是一个电子商务网站，其中用户有多个购物车（每个都有一个 id 和名称），并且可以在每个购物车中放置不同的商品（在 items 数组中）。

当用户从购物车中删除商品时，我的 console.log() 语句显示购物车数组正在商店中更新，但是除非我在购物车内插入新的购物车对象，否则用户界面不会反映这一点数组。

1. 为什么我不能像更新存储中的普通数组一样更新嵌套数组？

2. 我该如何解决这个问题？

---

我的初始商店

const intialStore = {
    carts: [],
    first_name : "ford",
    last_name : "doly"

} 

---

我的减速器功能

export default function reducer (store = intialStore, action) {
    let {type, payload} = action;
    switch(type) {

     case DELETE_ITEM_IN_A_CART : {
    
                let carts = [...store.carts]
    
    
  let newCarts =   carts.map((cartItem, index) => {
    
                    if (index == payload.cartIndex){
    
                        let array = [...cartItem.items]
                        array.splice(payload.itemIndex, 1) 
    
                        cartItem.items = [...array  ]
                    }
    
                    
                    
    
                    return cartItem ;
                })
    
            
                console.log(carts)
    
                //carts[payload.cartIndex].items.splice(payload.itemIndex, 1)
    
               
               
                return {...store, carts : newCarts}
            }

       default:
          return {...store}
}

---

我的动作创建者

export const deleteitemInCart = (cartIndex, itemIndex) => {
    return {
        type: DELETE_ITEM_IN_A_CART,
        payload: {
            cartIndex,
            itemIndex
        }
    }
}

Answer 1

map 返回一个新数组，它不会改变原始数组（这很好，我们不想改变它）。但这意味着为了使您的映射操作持久化，您需要将结果分配给一个变量。

let newCarts = carts.map(...)

...

return {...store, carts: newCarts}

现在，您只是返回与新状态相同的 carts 数组。

Answer 2

当您使用扩展运算符时，您只是在制作一个浅拷贝。在你的 reducer 中，尝试使用 JSON.parse(JSON.stringify(carts)) 以便在执行拼接操作之前进行深层复制。这将确保您不会改变任何现有状态，而是对副本进行操作并在 reducer 结束时返回新副本。