Удалить несколько элементов в одном массиве в состоянии реакции из другого массива

Question

У меня есть этот массив

let deleted = [
  {id: '123', name: 'Something'},
  {id: '321', name: 'Something1'}
];

, и у меня есть это

this.setState({
            config: {
                ...this.state.config,
                categories: this.state.config.categories.map(cat => ({
                    ...cat,
                    movies: [...cat.movies, ...currentMovies]
                }))
            }
        });

Каждый массив фильмов для каждой категории содержит все элементы из массива deleted, но это не те же массивы, потому что некоторые содержат свойство selected, а некоторые нет, но mov ie id одинаковы.

Как я могу удалить каждый элемент из массива delete из каждого массива категорий .ovies?

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

movies: this.state.config.categories.filter(item => item.id !== deleted.id)

Но я не знаю, лучшее ли это решение, может ли кто-нибудь помочь?

Заранее спасибо

Answer 1

Не очень ясно, какова структура состояний, но фильтровать массив фильмов путем проверки по массиву удаляемых фильмов можно двумя способами, используя функцию array :: filter.

1. Искать в удаленном массиве каждую итерацию и проверять, совпадает ли mov ie id (O(n) линейный поиск ). Если совпадений не найдено, включить в результат.

movies.filter(movie => !deleted.some(({ id }) => movie.id === id))

let deleted = [
  { id: "123", name: "Something" },
  { id: "321", name: "Something1" }
];

const currentState = {
  movies: [
    { id: "120", name: "Something 120" },
    { id: "121", name: "Something 121" },
    { id: "122", name: "Something 122" },
    { id: "123", name: "Something" },
    { id: "124", name: "Something 124" },
    { id: "125", name: "Something 125" },
    { id: "321", name: "Something1" }
  ]
};

const nextState = currentState.movies.filter(
  movie => !deleted.some(({ id }) => movie.id === id)
);

console.log(nextState)

Создайте карту удаленных идентификаторов mov ie, чтобы вам не приходилось искать каждый раз (O(1) постоянный поиск ).

const deletedMovieIdSet = deleted.reduce((ids, { id }) => {
  ids.add(id);
  return ids;
}, new Set());

...

movies.filter(movie => !deletedMovieIdSet.has(movie.id))

let deleted = [
  { id: "123", name: "Something" },
  { id: "321", name: "Something1" }
];

const deletedMovieIdSet = deleted.reduce((ids, { id }) => {
  ids.add(id);
  return ids;
}, new Set());

const currentState = {
  movies: [
    { id: "120", name: "Something 120" },
    { id: "121", name: "Something 121" },
    { id: "122", name: "Something 122" },
    { id: "123", name: "Something" },
    { id: "124", name: "Something 124" },
    { id: "125", name: "Something 125" },
    { id: "321", name: "Something1" }
  ]
};

const nextState = currentState.movies.filter(
  movie => !deletedMovieIdSet.has(movie.id)
);

console.log(nextState)

Answer 2

Это должно работать. фильтровать фильмы также с помощью карты.

const filt = (item) => item.id !== deleted.id;
this.state.config.categories.filter(filt).map(({ movies, ...rest }) => ({
  ...rest,
  movies: movies.filter(filt),
}));