React redux toolkit: Uncaught Error:[Immer] An immer producer returned a new…

React在写一个购物车的redux toolkit时遇到了问题。核心代码如下：

import { createSlice } from "@reduxjs/toolkit";  const cartSlice = createSlice({     name: 'cart',     initialState: {         cartItems: [],         cartItemCount: 0     },     reducers: {         addProduct(state, action) {             const { imageUrl, name, price } = action.payload             let newCartItems = [...state.cartItems]              let flag = newCartItems.some((item, index, arr) => {                 if(item.name == name) {                     arr[index].quantity += 1                     return true                 }             })              if(!flag) {                 newCartItems = [                      ...state.cartItems,                     { imageUrl, name, price, quantity: 1 }                  ]             }              const cartItemCount = newCartItems.reduce(                 (prevTotal, currItem) =>  prevTotal + currItem.quantity, 0             )             return { cartItems: newCartItems, cartItemCount }         }     } })  export const { addProduct, deleteProduct, incQuantity, decQuantity } = cartSlice.actions export default cartSlice.reducer  

核心逻辑是，调用addProduct来修改redux所管理的cartItems和cartItemCount,当向购物车中添加一个新的物品时，代码正常运行；但当反复添加一个物品时，代码报出如下错误：

搜下资料发现是因为redux使用immer，不允许在reducer中修改state值后还return，二者只能取其一。

因此，当添加一个新物品时，由于没有修改cartItems，因此可以有返回值，不报错。

但当添加一个重复的物品时，即使在最开始使用了let newCartItems = [...state.cartItems]来创建一个新的对象，但由于state.cartItems数组中保存的不是基本数据类型，而是一个对象，因此newCartItems保存的是state.cartItems中各个对象的引用，即

newCartItems == state.cartItems  // false newCartItems[0] == state.cartItems[0]  // true 

由此可得，添加一个新物品时，由于既修改了state，又return了新值，因此报出immer错误。

修改后的代码如下：

addProduct(state, action) {     const { imageUrl, name, price } = action.payload      let flag = state.cartItems.some((item, index, arr) => {         if(item.name == name) {             arr[index].quantity += 1             state.cartItemCount += 1             return true         }     })      if(!flag) {         state.cartItems.push({ imageUrl, name, price, quantity: 1 })         state.cartItemCount += 1     } } 

这里只是对state做了修改，而没有return新值，因此代码正常运行。