При переключении некоторых данных в состояние обновление хранилища приводит к потере некоторых других данных. - PullRequest
Новая
       15

При переключении некоторых данных в состояние обновление хранилища приводит к потере некоторых других данных.

0 голосов
/ 11 июня 2019

У меня есть некоторые данные в моем магазине приставок

Исходные данные: 

"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 между истиной и ложью.

Generated Buttons

Пока переключение работает правильно, обновление хранилища вызывает filterGroupName и filterGroupType длябыть потерянным.

Например, если бы я должен был нажать кнопку, связанную с меткой ps4, это то, как будет возвращаться состояние

Возвращенное состояние для PS4 click 

"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
                        }
                    }
                }
            };

1 Ответ

0 голосов
/ 12 июня 2019 
   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
                    }
            } 
            }
        };
...