React中过滤对象数组返回空结果问题排查

以下是几个常见的原因及解决办法：

• 大小写不匹配
  JavaScript的===是严格相等判断，会区分大小写。如果数据中category的实际值是小写的"kids"、全大写的"KIDS"或者其他大小写组合，都会导致匹配失败。可以统一转为小写后再比较：

  const filteredTrendingProducts = products.filter(
    (item) => item.data?.category.toLowerCase() === "kids"
  );
  setTrendingProducts(filteredTrendingProducts);
  

• category值包含空格或特殊字符
  若实际数据里category前后有空格（比如" Kids "），或者存在不可见的特殊字符，严格相等也会不匹配。可以用trim()去除首尾空格后再判断：

  const filteredTrendingProducts = products.filter(
    (item) => item.data?.category.trim() === "Kids"
  );
  setTrendingProducts(filteredTrendingProducts);
  

• 数据加载时机问题
  如果products是异步获取的，可能在执行筛选时数组还未被正确填充，或者部分元素的data属性还未初始化。可以在筛选前先确认数据状态，比如打印实际的category值：

  console.log(products.map(item => item.data?.category));
  

  查看输出结果中是否真的存在"Kids"这个值，同时用可选链操作符?.避免因data未定义导致的报错。

• 数组结构与预期不符
  控制台显示的对象可能是引用类型的实时状态，筛选时的products可能和你后续看到的结构不一致。可以在筛选前打印完整数组，确认每个元素的data.category确实符合预期。

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