Объединение фильтра и включает в себя для фильтрации нескольких значений

Question

Я пытаюсь создать новое состояние, отфильтровывая значения из текущего состояния.

        // Create new state
        const defaultState = [...this.state.defaultData];
        newState = defaultState.filter(movies => !filteredItems.includes(movies.genre_ids));

Я думаю, что моя проблема может быть связана с массивом подобъектов, поскольку, когда я делаю это, я просто получаю пустой результат.

Пример JSON (я пытаюсь отфильтровать по genre_ids:

https://api.themoviedb.org/3/movie/now_playing?api_key=39b616a19667f17d8ffcaa175fc93491&language=en-US&page=1

То, что я уже пробовал, это жесткое кодирование значений, что не работает.Однако я попытался отфильтровать по заголовкам, используя тот же метод, и жестко закодировать заголовки, что работает. Поэтому я думаю, что, может быть, проблема в моем переходе к genre_ids?

Я создал стек для бликов, чтобы показатьтекущее состояние вещей: https://react -sxyyfp.stackblitz.io

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

Answer 1

Поскольку movies.genre_ids является массивом в указанной вами ссылке, я рекомендую перебирать все id в нем и проверять, соответствует ли один из них, это можно сделать с помощью some:

const defaultState = [...this.state.defaultData];
newState = defaultState.filter(movies => movies.genre_ids.some(genre => !filteredItems.includes(genre)));

Если один id в ваших фильмах также находится в фильтре, заданном пользователем, some вернет true.

---

РЕДАКТИРОВАТЬ

Надлежащий способ обновить ваше состояние здесь - использовать версию обратного вызова setState и использовать ваше предыдущее состояние для изменения нового:

this.setState(prev => ({
    defaultData: prev.defaultData.filter(movies => movies.genre_ids.some(genre => !filteredItems.includes(genre)));
}))

Я могу догадаться, что вы выбираете эти данныеиз внешнего источника.Если это так, вы должны получить свои данные в функции componentDidMount и установить состояние сразу после его получения (внутри функции then или после оператора await в зависимости от того, какой способ вы предпочитаете).