React嵌套循环多console.log输出及表格行过滤异常问题

问题分析 #

1. 重复日志问题：原代码用两层嵌套循环（遍历行→遍历筛选类型），4行×2个选中项会输出8次type日志，属于无效重复输出。
2. 筛选失效问题：
   • 类名匹配错误：filterTypes里存的是产品名（如YT），但表格行的类是prod-YT格式，原代码直接用产品名判断类存在性，导致匹配失败。
   • 逻辑覆盖错误：每一行会被每个筛选类型反复修改样式，最后一次判断会覆盖之前的操作，导致符合条件的行被错误隐藏。

修复代码 #

const filterHandler = () => {
  const filterClass = document.querySelectorAll(".ampFilter");
  // 空筛选处理：未选中任何产品时显示所有行
  if (filterTypes.length === 0) {
    filterClass.forEach(row => row.classList.remove("hidden"));
    return;
  }
  // 遍历每一行判断筛选条件
  filterClass.forEach(row => {
    console.log("当前行：", row);
    // 检查行是否包含任意一个筛选对应的prod-类
    const isMatch = filterTypes.some(type => row.classList.contains(`prod-${type}`));
    // 根据匹配结果切换显示状态
    isMatch ? row.classList.remove("hidden") : row.classList.add("hidden");
  });
};

修复说明 #

1. 消除嵌套循环：用Array.some()替代双层循环，每一行仅做一次匹配判断，避免重复日志和逻辑覆盖。
2. 修正类名匹配：将判断条件改为prod-${type}，完全匹配表格行的类名格式。
3. 添加空筛选兼容：处理未选中任何产品的场景，确保所有行正常显示。
4. 简化样式操作：每一行仅根据最终匹配结果修改一次样式，避免多次操作导致的状态混乱。

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