如何根据选中的流派ID筛选电影数组，得到匹配的影片列表

安全阿岳

2026-10-1

问题分析与代码优化

现有代码的问题

冗余代码：forEach无返回值，赋值给filteredMovies的操作完全无效
适用场景受限：当前逻辑仅支持单选单个流派的场景，如果你提到的「选中的流派数组」是多选场景，selectedGenres.id的写法会直接报错（数组没有id属性）
数据丢失风险：直接用筛选结果覆盖原movieList，后续再次筛选时会丢失全量电影原始数据，无法进行二次筛选
缺少边界处理：如果某条电影数据没有genre_ids字段，调用includes会直接抛出异常

适配不同场景的实现方案

场景1：仅单选单个流派

你的逻辑本身可以运行，可简化为更规范的filter写法，同时补充边界判断：

const handleClick = () => {
  // 从原始全量电影列表筛选，不要直接用修改过的movieList
  const newMovieList = originalMovieList.filter(movie => {
    // 先判断genre_ids存在再调用includes
    return movie.genre_ids?.includes(selectedGenres.id) ?? false
  })
  setMovieList(newMovieList)
  setModuleOpen("")
}

场景2：支持多选多个流派

先提取选中流派的id集合，再判断电影的流派是否匹配：

const handleClick = () => {
  // 先把选中的所有流派id提取为单独的数组
  const selectedGenreIds = selectedGenres.map(genre => genre.id)
  const newMovieList = originalMovieList.filter(movie => {
    if (!movie.genre_ids) return false
    // 如果要求「电影包含任意一个选中流派就匹配」，用some
    return movie.genre_ids.some(genreId => selectedGenreIds.includes(genreId))
    // 如果要求「电影必须包含所有选中流派才匹配」，把上面的some换成every即可
  })
  setMovieList(newMovieList)
  setModuleOpen("")
}