切换状态中的某些数据时，对存储的更新导致其他一些数据丢失

Question

我的Redux存储区中有一些数据

原始数据：

"filterData":[
    {
      "filterGroupName":"platform",
      "filterGroupType":"or",
      "filterLabels":[
        {
          "label": "ps4",
          "isActive": false
        },{
          "label": "ps3",
          "isActive": false
        },{
          "label": "psvita",
          "isActive": false
        },{
          "label": "psvr",
          "isActive": false
        }
      ]
    },
    {
      "filterGroupName":"genre",
      "filterGroupType":"or",
      "filterLabels":[
        {
          "label": "action",
          "isActive": false
        },{
          "label": "racing",
          "isActive": false
        },{
          "label": "rpg",
          "isActive": false
        },{
          "label": "action",
          "isActive": false
        }
      ]
    },
    {
      "filterGroupName":"price",
      "filterGroupType":"or",
      "filterLabels":[
        {
          "label": "price1",
          "isActive": false
        }, {
          "label": "price2",
          "isActive": false
        },{
          "label": "price3",
          "isActive": false
        },{
          "label": "price4",
          "isActive": false
        }
      ]
    },
    {
      "filterGroupName":"misc",
      "filterGroupType":"and",
      "filterLabels":[
        {
          "label": "action",
          "isActive": false
        }
      ]
    }
  ]

此数据用于生成一堆按钮，当按下这些按钮时，将分派一个在真假之间切换isActive的动作。

在切换正常进行的同时，商店的更新导致filterGroupName和filterGroupType丢失。

例如，如果我要按下与ps4标签关联的按钮，则返回状态如下所示

PS4单击返回状态

"filterData":[
    {
     {
        "label": "ps4",
        "isActive": true
      },{
        "label": "ps3",
        "isActive": false
      },{
        "label": "psvita",
        "isActive": false
      },{
        "label": "psvr",
        "isActive": false
      }
    },
    {
      "filterGroupName":"genre",
      "filterGroupType":"or",
      "filterLabels":[
        {
          "label": "action",
          "isActive": false
        },{
          "label": "racing",
          "isActive": false
        },{
          "label": "rpg",
          "isActive": false
        },{
          "label": "action",
          "isActive": false
        }
      ]
    },
    {
      "filterGroupName":"price",
      "filterGroupType":"or",
      "filterLabels":[
        {
          "label": "price1",
          "isActive": false
        }, {
          "label": "price2",
          "isActive": false
        },{
          "label": "price3",
          "isActive": false
        },{
          "label": "price4",
          "isActive": false
        }
      ]
    },
    {
      "filterGroupName":"misc",
      "filterGroupType":"and",
      "filterLabels":[
        {
          "label": "action",
          "isActive": false
        }
      ]
    }
  ]

问题显然出在我的减速器上，但是我无法弄清楚哪里出了问题。

减速器：

case actionTypes.SET_SELECTED_FILTER:
            const filterGroupIndex = action.filterGroupIndex;
            const filterButtonIndex = action.filterButtonIndex;

            console.log(state.filterData[filterGroupIndex].filterLabels[filterButtonIndex]);

            return {
                ...state,
                filterData: {
                    ...state.filterData,
                    [filterGroupIndex]: {
                        ...state.filterData[filterGroupIndex].filterLabels,
                        [filterButtonIndex] : {
                            ...state.filterData[filterGroupIndex].filterLabels[filterButtonIndex],
                            isActive: !state.filterData[filterGroupIndex].filterLabels[filterButtonIndex].isActive
                        }
                    }
                }
            };

Answer 1

   case actionTypes.SET_SELECTED_FILTER:
        const filterGroupIndex = action.filterGroupIndex;
        const filterButtonIndex = action.filterButtonIndex;

        console.log(state.filterData[filterGroupIndex].filterLabels[filterButtonIndex]);

        return {
            ...state,
            filterData: {
                ...state.filterData,
                [filterGroupIndex]: {
           "filterGroupName":...state.filterData[filterGroupIndex].filterGroupName
           "filterGroupType":...state.filterData[filterGroupIndex].filterGroupType
           "filterLabels": {
                ...state.filterData[filterGroupIndex].filterLabels,
           [filterButtonIndex] : {
                        ...state.filterData[filterGroupIndex].filterLabels[filterButtonIndex],
                        isActive: !state.filterData[filterGroupIndex].filterLabels[filterButtonIndex].isActive
                    }
            } 
            }
        };