Reactjs 将项重新添加到状态为重复项的现有对象

我正在使用redux和lodash将一个项目添加到购物车中。出于某种原因，它复制了条目。所以我在cart对象和cart.items对象中有相同的项目

我的减速机：

const INITIAL_STATE = {
    items: {},
    count: null
}

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
    case actionTypes.ADD_CART_ITEM:
        return { ...state, ..._.merge(state.items, { [action.payload.id]: action.payload }) }
    default:
        return state
    }
}

我的行动

export const addCartItem = (item) => {
    return {
        type: actionTypes.ADD_CART_ITEM,
        payload: item
    }
}

我要添加到购物车的功能

addToCart() {
        const { selectedSize, selectedShade, selectedQuantity } = this.props.product
        const { id, sku } = this.props.product.product

        if (selectedSize && selectedShade && selectedQuantity) {
            const item = {
                id: id,
                sku: sku,
                size: selectedSize,
                shade: selectedShade,
                quantity: selectedQuantity
            }
            this.props.addCartItem(item)
        } else {
            console.log('you need to select product attributes')
        }
    }

添加项目后我的重复使用状态

cart: {
    '1': {
      id: 1,
      sku: '7620896024640',
      size: {
        id: 2,
        name: 'Medium',
        prefix: 'M'
      },
      shade: {
        id: 3,
        name: 'Blue',
        prefix: 'Blue',
        color: 'blue'
      },
      quantity: 3
    },
    '9': {
      id: 9,
      sku: '9125620808537',
      size: {
        id: 2,
        name: 'Medium',
        prefix: 'M'
      },
      shade: {
        id: 1,
        name: 'Red',
        prefix: 'Red',
        color: 'red'
      },
      quantity: 1
    },
    items: {
      '1': {
        id: 1,
        sku: '7620896024640',
        size: {
          id: 2,
          name: 'Medium',
          prefix: 'M'
        },
        shade: {
          id: 3,
          name: 'Blue',
          prefix: 'Blue',
          color: 'blue'
        },
        quantity: 3
      },
      '9': {
        id: 9,
        sku: '9125620808537',
        size: {
          id: 2,
          name: 'Medium',
          prefix: 'M'
        },
        shade: {
          id: 1,
          name: 'Red',
          prefix: 'Red',
          color: 'red'
        },
        quantity: 1
      }
    }
  }

---

控制不在同一操作中调用两次的控件（例如，在另一个组件中），或者如果使用的是效果，请查看您调用的操作是否正确。我认为您在减速器中设置的状态不正确。您可以尝试用以下内容替换它：

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
    case actionTypes.ADD_CART_ITEM:
        return { ...state, items: {...state.items, [action.payload.id]: action.payload }}
    default:
        return state
    }
}

---

我不明白？如果你说你可能会采取额外行动，我不明白。只有一个添加到购物车的acton会触发。我正在用chromeyou使用的redux调试工具进行调试？？不，我只使用类。useEffects在类组件中不起作用，在reducer中，您不调用相同的操作，或者我真的不知道为什么

return{…state，items:{…state.items，{[action.payload.id]：action.payload}}

givies出现语法错误，但是

返回{…state，items:[…state.items，{[action.payload.id]：action.payload}}

有效，但仍然不是我想要的解决方案。它在项目内创建一个数组，然后添加该项目。所以它看起来像第一个项目：购物车[items][0][1]，第二个项目购物车[items][1][1]哦，对不起。我认为

[action.payload.id]：action.payload

不应该用大括号包装。我更新了答案。你能试试吗？一点警告。项目被视为一个对象，我无法使用.map遍历它。有没有一种简单的方法可以将cart.items视为一个数组？那么在

items

中需要什么结构呢？它是一个对象数组吗？