Question

我是Redux的新手。

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

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

为什么我不能像更新商店中的常规数组一样更新嵌套数组？
我该如何解决？

我的初始商店

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}

现在，您将返回与新状态相同的购物车数组。

Answer 2

使用散布运算符时，您仅制作浅表副本。在您的reducer中，尝试使用JSON.parse(JSON.stringify(carts))进行深拷贝，然后再执行拼接操作。这将确保您不会改变任何现有状态，而是对副本进行操作并在化简器的末尾返回新副本。

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

2 个答案: