Обновление дочернего массива в редукторе с использованием React Context - PullRequest
Новая
       16

Обновление дочернего массива в редукторе с использованием React Context

0 голосов
/ 15 апреля 2020

Я выполняю некоторую фильтрацию с использованием React Context, и у меня возникают трудности с обновлением значения дочернего массива, когда выбран фильтр.

Я хочу иметь возможность фильтровать по минимальной цене, которая выбрана в раскрывающемся списке пользователя я затем отправляю действие, чтобы сохранить его в состоянии редукторов, однако, когда я пытаюсь обновить внутренний массив (homes: []), который находится внутри массива событий (который заполняется данными о нагрузке) ), Я, кажется, стереть существующие данные, которые были за пределами внутреннего массива?

В двух словах, я должен быть в состоянии поддерживать существующий массив событий и отфильтровать по цене в массиве домов, я предоставили копию моего примера кода ранее, пожалуйста, дайте мне знать, если я объяснил это достаточно хорошо! 

export const initialState = {
  priceRange: {
    min: null
  },
  developments: []
};


// Once populated on load, the developments array (in the initialState object) 
// will have a structure like this, 
// I want to be able to filter the developments by price which is found below

developments: [
  name: 'Foo',
  location: 'Bar',
  distance: 'xxx miles',
  homes: [
    {
      name: 'Foo',
      price: 100000
    },
    {
      name: 'Bar',
      price: 200000
    }
  ]
]

case 'MIN_PRICE':
  return {
    ...state,
    priceRange: {
      ...state.priceRange,
      min: action.payload
    },
    developments: [
      ...state.developments.map(development => {
      // Something here is causing it to break I believe?
        development.homes.filter(house => house.price < action.payload);
      })
    ]
  };
<Select onChange={event=>
  dropdownContext.dispatch({ type: 'MIN_PRICE' payload: event.value }) } />

1 Ответ

2 голосов
/ 15 апреля 2020

Вы должны отделить дома от других свойств, затем вы можете применить фильтр и перестроить объект развития: 

return = {
    ...state,
    priceRange: {
        ...state.priceRange,
        min: action.payload
    },
    developments: state.developments.map(({homes, ...other}) => {
        return {
            ...other, 
            homes: homes.filter(house => house.price < action.payload)
        }
    })
}
...