Фильтрация массива и возврат весь массив?

Question

[ART4]

Добрый вечер!
Имеется массив
const Service = [];
Имеется функция по клику:

clickButtonFilter = (name) =>{
        this.setState({ Service: this.state.Service }, () => {
            const arr = this.state.Service.filter(function (category) {
                if(category.category === name){
                    return category;
                }
            });
            this.setState({Service: arr});
            console.log(arr);
            debugger;
        });
    };

Суть в чём:
Имеются 3 кнпоки: каждая передаёт категорию, падает в .filter и выводит те элементы, которые попадают.
Всё работает, отфильтровало и вывелись элементы которые надо.
Вопрос:
Как сделать так, чтоб при нажатие повторно на другую кнопку (из 3) вывело другие значения, а не приходил массив пустой?

В данный момент, нажал на 1 кнопку вывело, нажал на 2 или 3 кнопку, массив пустой. В исходное состояние весь массив вернуть..

Answer 1

[McBernar]

Зачем вы делаете setstate и пишете туда данные из текущего стейта? Что это вообще?

const Service = [...]

clickButtonFilter = name => {
  const arr = Service.filter(el => el.category === name)
  this.setState({Service: arr})
}

Comments

[abberati]

filter возвращает новый отфильтрованный массив. он не мутирует

[McBernar]

abberati, А, лол, перепутал с sort :) Спасибо.

[ART4]

Как я понял вот так укатился код, но такой же принцип и остался, возврата нету данных массива..

clickButtonFilter = name => {
        const arr = this.state.Service.filter(el => el.category === name)
        this.setState({Service: arr})
    };

[McBernar]

ART4, вы понимаете, что ПЕРЕЗАПИСЫВАЕТЕ массив Service, оставляя там только то, что отфильтровали? И в следующий раз фильтр будет проходить по уже отфильтрованному массиву.

1. Создайте массив Service вне стейта. Заполните его данными.
2. В функции clickButton вы берете этот массив Service, фильтруете, и записываете в стейт новый массив filteredService.
3. Ваше приложение работает с массивом filteredService.
4. Если вам нужно перефильтровать данные — вы снова берете Service, фильтруете и перезаписываете в стейте filteredService.

[ART4]

McBernar, Да, я понял, сделал и получилось, спасибо за подробное описание!