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

Question

[Kirill Ivanov]

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

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

Но возник вопрос, как вернуться к исходному состоянию данных, когда в фильтре выбрано условно all и должны показываться все данные? Вроде как-то можно перед изменением стэйта его копировать, но так как еще новичок в Реакте, пока не совсем понимаю как именно.

Comments

[Даниил Маслов]

просто сохраняйте изначальный массив и отфильтрованный в разные константы.

Answer 1

[smartbe]

Добавь в общий State новое свойство, которое будет отвечать за твои option из селекта. Там просто будет строка с нужным названием



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



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



То есть логика стейта такая. У тебя первоначально есть какой то массив в стейте. И в стейт добавляется новое свойство filter которое является строкой. Далее в компонент ты передаёшь массив, который прогоняется через функцию. Сам основной массив в стейте ни за что не трогай :)

Comments

[Владимир]

Чет со строкой мудренно, проще условия сохранять, например тот же жанр как в примере, а из условий собирать фильтр в рендере.

[smartbe]

Владимир, а что под условиями подразумеваете?

[Владимир]

smartbe, в вопросе есть пример как он фильтр собирает.

Answer 2

[Владимир]

Фильтровать нужно в рендере, а в стейт сохранять условия.

Comments

[uRoot]

Фильтровать нужно в рендере,

Как это может выглядеть?

[Владимир]

Издеваешся?

const { field1, field2 } = props
const filteredItems = items
  .filter(item => 
    !field1 || item.field1 === field1) 
    && (!field2 || item.field2 === field2)
  )
return (<Table items={filteredItems} />)