使用Array.filter报array-callback-return错误的原因与修复方法

• 核心逻辑错误：混淆了Array.prototype.filter()与Array.prototype.map()的API职责
  • filter()仅用于数组元素筛选：它的回调需要返回布尔类值（真值/假值），用来判定当前元素是否保留在结果数组中，不会修改数组元素本身。你当前在filter回调中直接返回<th>JSX元素属于无效写法——filter返回的结果数组里仍然是原始的列名字符串，不会生成你需要的表头DOM，渲染逻辑完全不生效。
  • 你的业务逻辑实际包含两个独立步骤：先过滤掉名称带noheader的列，再把剩余列渲染为表头单元格，两个步骤不能合并在filter方法中实现。
• 触发array-callback-returnESLint报错的直接原因：该规则要求所有数组遍历方法的回调，必须在所有代码分支返回符合方法预期类型的明确值。你在filter的判断分支中返回了React JSX对象（非布尔类型值），规则判定返回值类型与filter的预期不匹配、存在用法错误，因此抛出校验报错。

将筛选逻辑和渲染逻辑拆分，链式调用两个数组方法实现需求：filter只负责做列筛选，返回布尔值判断列是否保留；筛选完成后调用map负责把列名映射为<th>JSX元素。
修复后的完整代码如下：

function Table({ data }) {
  return (
    <table className="main-table">
      <thead>
        <tr>
          {data["columns"]
            // 第一步：筛选不需要隐藏的表头
            .filter((header) => !header.includes("noheader"))
            // 第二步：把筛选后的表头渲染为th标签
            .map((header) => <th key={header}>{header}</th>)}
        </tr>
      </thead>
    </table>
  );
}

修复后filter的回调直接返回布尔判断结果，所有分支返回值类型统一，完全符合ESLint规则要求；map专门承担JSX转换的职责，渲染逻辑也能正常生效。

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