React中如何根据可选的genre、country参数高效筛选对象数组

核心优化思路：

• 利用逻辑短路代替多分支判断：每个筛选条件单独处理，无有效值时自动跳过该维度的校验
• 派生状态优先用useMemo计算，避免冗余的state和useEffect依赖，减少不必要的重渲染

最简筛选逻辑实现 #

直接把多分支判断合并为一行校验规则，完全符合你「筛选prop不存在就不做对应过滤」的要求：

useEffect(() => {
  setFilteredMovies(
    movies.filter(item => 
      (item.genre.includes(genre) || !genre) 
      && 
      (item.country.includes(country) || !country)
    )
  )
}, [movies, genre, country])

逻辑说明：当genre为假值（undefined、null、空字符串等）时，!genre为true，该条件整体返回true，相当于不对genre维度做限制；country维度逻辑同理。只有两个维度都符合要求（或无限制）的电影才会被筛选出来。

更推荐的性能优化版本 #

filteredMovies是完全可以从现有state和props计算出来的派生状态，不需要单独存state，也不需要用useEffect触发更新，用useMemo即可：

import { useState, useEffect, useMemo } from 'react'

const Component = ({ genre, country }) => {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    // fetch from api and set movies
  }, [])

  // 直接计算筛选结果，无额外性能开销
  const filteredMovies = useMemo(() => {
    return movies.filter(item => 
      (item.genre.includes(genre) || !genre) 
      && 
      (item.country.includes(country) || !country)
    )
  }, [movies, genre, country])

  return (
    <div>
      {filteredMovies.map((item) => (
        <Movie item={item} key={item.id} />
      ))}
    </div>
  );
}

如果后续需要新增筛选维度，比如按上映年份筛选，只需要在filter的判断里加一行&& (item.year === year || !year)即可，不需要新增分支判断，扩展性很强。

注意：你给出的原始movies数组里第三个对象的country属性值少了闭合双引号，使用时注意修正语法问题。

内容的提问来源于stack exchange，提问作者Daffy Duck