React移动端防抖搜索过滤异常：大小写敏感性陷阱

import { useEffect, useState } from "react";

/**
 * 自定义防抖Hook
 * @param value 需要防抖的值
 * @param delay 防抖延迟时间（毫秒）
 * @returns 防抖后的值
 */
function useDebounce<T>(value: T, delay?: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    // 设置定时器，在延迟后更新防抖值
    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);

    // 清除定时器，避免内存泄漏或不必要的更新
    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]); // 依赖项：当value或delay变化时，重新设置定时器

  return debouncedValue;
}

export default useDebounce;

// 存在问题的过滤逻辑片段
itemsSortedAlphabetically?.filter((item) => {
  if (debouncedValue === "") {
    return item;
  } else if (
    item.name.toLowerCase().includes(debouncedValue) || // item.name转小写，但debouncedValue未转
    item.brand?.toLowerCase().includes(debouncedValue)  // item.brand转小写，但debouncedValue未转
  ) {
    return item;
  }
})

// 修正后的过滤逻辑片段
itemsSortedAlphabetically?.filter((item) => {
  // 统一将debouncedValue也转换为小写进行比较
  const lowercasedDebouncedValue = debouncedValue.toLowerCase();

  // 如果搜索值为空，则返回所有项目
  if (lowercasedDebouncedValue === "") {
    return item;
  } else if (
    // 将item的属性和debouncedValue都转换为小写进行包含性检查
    item.name.toLowerCase().includes(lowercasedDebouncedValue) ||
    item.brand?.toLowerCase().includes(lowercasedDebouncedValue)
  ) {
    return item;
  }
  // 如果不匹配，则不返回
  return false; // 明确返回false，更清晰
})

itemsSortedAlphabetically?.filter((item) => {
  const lowercasedDebouncedValue = debouncedValue.toLowerCase();

  return (
    lowercasedDebouncedValue === "" ||
    item.name.toLowerCase().includes(lowercasedDebouncedValue) ||
    item.brand?.toLowerCase().includes(lowercasedDebouncedValue)
  );
});