React应用防抖搜索仅移动端过滤异常问题求助

开发者阿泽

2026-7-21

问题解决：React防抖搜索在安卓移动端过滤全部条目

核心问题分析

你已确认debouncedValue能正确获取输入值，问题大概率出在大小写不匹配和过滤函数的隐式返回行为上：

过滤逻辑仅将item.name和item.brand转成小写，但debouncedValue保留原始输入的大小写，移动端输入时（比如默认大写首字母）无法匹配条目，最终过滤结果为空。
过滤函数在else if分支外无明确返回值，默认返回undefined，会被filter判定为false，引发意外过滤结果。

修正方案

1. 统一大小写匹配逻辑

将debouncedValue也转为小写，确保匹配规则一致：

// 以"All"分类的过滤逻辑为例
itemsSortedAlphabetically?.filter((item) => {
  if (debouncedValue === "") {
    return true; // 明确返回true，而非返回item
  }
  const lowerDebounced = debouncedValue.toLowerCase();
  return item.name.toLowerCase().includes(lowerDebounced) || 
         (item.brand?.toLowerCase().includes(lowerDebounced) ?? false);
})

2. 明确过滤函数返回值

所有分支都返回布尔值，避免隐式返回undefined：

空输入时返回true，显示全部条目
匹配成功返回true，失败返回false
用?? false处理brand为undefined的情况，避免调用toLowerCase()报错

3. 防抖Hook优化（可选）

给防抖Hook添加默认延迟的类型安全处理，避免潜在类型问题：

import { useEffect, useState } from "react";

function useDebounce<T>(value: T, delay = 500): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;