@pashkevich-d

Как вернуться к изначальному state после фильтрации?

Всем привет! Есть таблица с разными данными. И под ней фильтр - select с разными option. В зависимости от того, какой option выбран, таблица фильтруется и в ней остаются только подходящие элементы. Для этого фильтрую весь исходный массив объектов и перезаписываю его в state, типо такого.

this.setState({
      selectedGanre: ganre,
      data: this.state.data.filter(song=>(
        song.ganre == ganre
      ))
    })


Но возник вопрос, как вернуться к исходному состоянию данных, когда в фильтре выбрано условно all и должны показываться все данные? Вроде как-то можно перед изменением стэйта его копировать, но так как еще новичок в Реакте, пока не совсем понимаю как именно.
  • Вопрос задан
  • 91 просмотр
Решения вопроса 1
@smartbe
Добавь в общий State новое свойство, которое будет отвечать за твои option из селекта. Там просто будет строка с нужным названием

5e6a8254062a8282848135.jpeg

Затем создай отдельно функцию filter которая будет брать массив, фильтровать его и отдавать новый массив. Всё это взависимости от строки которую ты установил в state

5e6a82b5a90ab747769419.jpeg

Затем создай переменную VisibilityItems (видные item) и возьми тот основной массив который у тебя был в state и прогони через эту функцию фильтрации и передай как свойство компоненту табоицы. У меня код тут немного другой, но думаю логика понятна.

5e6a8315ee6d4325251388.jpeg

То есть логика стейта такая. У тебя первоначально есть какой то массив в стейте. И в стейт добавляется новое свойство filter которое является строкой. Далее в компонент ты передаёшь массив, который прогоняется через функцию. Сам основной массив в стейте ни за что не трогай :)
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
locky_yotun
@locky_yotun
Я видел некоторый джаваскрипт
Вот 2 варианта: https://codesandbox.io/s/react-example-ir7lx
Первый мне нравится больше, но второй ближе к вашему коду
Ответ написан
Фильтровать нужно в рендере, а в стейт сохранять условия.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы