React开发搜索组件遇Array.prototype.filter()箭头函数返回值报错如何解决

问题根因 #

你遇到的是ESLint的array-callback-return规则校验报错，原因是Array.prototype.filter()的回调函数要求所有代码分支都必须返回布尔值，用来判定当前元素是否要保留，你的代码存在3处不符合要求的逻辑：

• 当searchTerm为空字符串时，if (searchTerm === "")的分支是空逻辑，没有任何返回值
• 当搜索关键词不匹配item的title，同时遍历完所有content块也没匹配到对应文本时，末尾没有返回值
• filter回调原则上应该返回布尔值，你直接返回item对象虽然隐式转成true能生效，但属于不规范写法

另外还有个隐性问题：你用forEach遍历content块的时候，内部的return只能终止当前遍历项的执行，没法跳出整个forEach循环，匹配到之后还是会继续遍历剩下的元素，会造成性能浪费。

修正后的代码 #

const filterData = () => {
  return data
    .filter((item) => {
      // 搜索词为空的话直接返回false过滤所有元素，如果你需要空搜索时展示所有内容，可改成return true
      if (searchTerm === "") {
        return false;
      }
      const lowerSearchTerm = searchTerm.toLowerCase();
      // 先匹配标题
      if (item.title.toLowerCase().includes(lowerSearchTerm)) {
        return true;
      }
      // 再匹配内容块，用some代替forEach，匹配到就直接终止遍历返回true
      return item.content.some((obj) => {
        return obj.text && obj.text.toLowerCase().includes(lowerSearchTerm);
      });
    })
    .map((item) => {
      return (
        <div key={item.index}>
          <h3 style={{ padding: "0.25rem" }}>{splitResult(item.title)}</h3>
          {item.content.map((block, i) => (
            <div key={i}>
              {block.text && <div>{splitResult(block.text)}</div>}
              {block.items && (
                <div>
                  {block.items.map((l, i) => (
                    <div style={{ padding: "0.25rem" }} key={i}>
                      {splitResult(l)}
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))}
          <div
            className={styles.searchLink}
            onClick={() => {
              context.setCurrentSlide(item.index);
              setSearchTerm("");
              hideResults();
              clearInput();
              toggleSearch();
            }}
          >
            Go To This Slide
          </div>
          <hr />
        </div>
      );
    });
};

优化说明 #

• 把重复调用的searchTerm.toLowerCase()提前提取成变量，减少重复计算
• 用Array.some()代替forEach做内容匹配，匹配到第一个符合条件的元素就会直接终止遍历返回true，性能更好
• 所有分支都明确返回布尔值，符合filter的使用规范，彻底解决ESLint报错

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