React中遍历含数组的对象并过滤时存在的问题分析

1. filter回调缺少返回值，导致过滤结果为空 #

在/night-owl/movies分支的filter回调里，仅执行了判断语句但未返回布尔值：

movies[property].filter((show) => {
  show.original_title
    .toLowerCase()
    .includes(props.searching.search);
})

filter方法要求回调返回布尔值来决定是否保留当前元素，此处无return语句，默认返回undefined（会被视为false），最终每个过滤后的数组都会是空数组。

2. 使用for...in遍历对象存在风险 #

for...in会遍历对象原型链上的所有可枚举属性，如果movies对象继承了额外属性（比如原型上的方法），这些属性也会被遍历到，引发不必要的处理甚至报错。建议用Object.keys(movies)或Object.values(movies)来仅遍历对象自身的可枚举属性。

3. 过滤结果丢失原分类结构信息 #

当前代码将所有过滤后的数组推入一个数组返回，最终得到二维数组，丢失了原对象中trendingMovies、popularMovies等分类键名。后续使用过滤结果时，无法区分各分类的电影数据，应该保留原有对象结构，返回一个键名不变、值为对应过滤后数组的对象。

4. 缺少空值防护 #

当movies为undefined或null时，movies[property]会直接报错；若某部电影的original_title不存在，也会引发报错。需要添加可选链操作符做防护，比如movies?.[property]、show?.original_title。

修正后的示例代码 #

else if (location.pathname === "/night-owl/movies") {
  const filteredResult = {};
  Object.keys(movies).forEach(key => {
    filteredResult[key] = movies[key]?.filter(show => 
      show?.original_title?.toLowerCase().includes(props.searching.search.toLowerCase())
    ) || [];
  });
  return filteredResult;
}

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