Как правильно организовать фильтр массива в React?

Question

[uRoot]

Есть массив с айтемами:

const json = [
    {action : true, new : true, name : 'Морський'},
    {action : true, new : false, name : 'Дольче Віта' },
    {action : false, new : false, name : 'Спекотний сезон' },
    {action : false, new : true, name : 'Уікенд' },
]

Есть стейт, в который сетятся фильтры из чекбоксов:

filterItems = (event, name) => {
    this.setState({
      [name]: event.target.checked,
    });
  }

В функции filterItems я хочу прогнать json по фильтрам в state и вывести результат. Я пытаюсь сделать так:

const item = json.filter(element => this.state.action && this.state.new && ...)

Но это во первых слишком топорно, а во вторых - выводится пустой массив, то есть не работает. Как это лучше сделать в контексте React?

Answer 1

[0xD34F]

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

Во-вторых:

const filterByProps = Object.entries(this.state.filters).filter(n => n[1]).map(n => n[0]);
const filteredItems = this.state.items.filter(n => filterByProps.every(m => n[m]));

Comments

[uRoot]

Спасибо. В вашем примере фильтр срабатывает на шаг позже. Когда фильтр уже сброшен

[0xD34F]

CryNet, всё работает как надо. Если реализовать правильно. А вы, очевидно, сделали криво.

[uRoot]

0xD34F, да, допустил ошибку