Реагировать Выберите выпадающий список наИзменить фильтр и восстановить исходное / предыдущее состояние?

Question

У меня есть выпадающий список, где я запускаю функцию onChange. После onChange я фильтрую текущее состояние React. Это работает, и я могу фильтровать уникальные значения. Тем не менее, я не могу сбросить состояние в предыдущее исходное состояние при изменении после перехода к другому элементу выбора из раскрывающегося списка.

handleStateOnChange = e => {
    let selectedWerkgever = e.target.value;

    const list = this.state.opleidingen.filter(({ opleiding_werkgever }) =>
        selectedWerkgever.includes(opleiding_werkgever)
    );

    this.setState({
        opleidingen: list,
        isResetButtonActive: true,
    });

    console.log('changed');
};

Я фильтрую все, что находится внутри массива, включая "opleiding_werkgever". Но как я могу сначала вернуться к изменениям и заново отфильтровать?

Answer 1

Я бы сохранил selectedWerkgever в состоянии и использовал бы это для фильтрации ваших выпадающих элементов. Сохранить исходный список без изменений.

Так что упростите свой дескриптор StateOnChange:

handleStateOnChange = e => {
    this.setState({
      selectedWerkgever: e.target.value,
      isResetButtonActive: true
    });
};

И используйте это, чтобы отфильтровать параметры выпадающего списка:

<select>
  {this.state.opleidingen.filter(({ opleiding_werkgever }) =>
    this.state.selectedWerkgever.includes(opleiding_werkgever)).map(item=>
        <Option value={item} />}>)
 }
 ...

Answer 2

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

{
   opleidingen: list,
   isResetButtonActive: true,
   originalOpleidingen : list
}