仅在移动设备上的 React 应用程序中去抖动搜索未正确过滤

Question

所以我有一个 React 应用程序，最近添加了一个搜索栏来消除价值。它在 dev 和 prod 中按预期在桌面上工作，但是当尝试在移动设备上使用它时，它会过滤所有项目而不是基于输入。

我使用这个钩子进行去抖：

import { useEffect, useState } from "react";

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]);

  return debouncedValue;
}

export default useDebounce;

并在全球范围内这样称呼它：

const debouncedValue = useDebounce(searchTerm, 1000);

我尝试使用 250 到 1000 之间的几个持续时间来查看它是否可能只是需要更多时间才能赶上的移动设备，但结果是一样的。

这里是过滤发生的地方：

<div className="mt-2">
      <div>{data?.length === 0 && <p>No Items</p>}</div>
      {sortType === "All" && (
        <div className="flex flex-col gap-1">
          <Banner>All Food Items</Banner>
          {itemsSortedAlphabetically
            ?.filter((item) => {
              if (debouncedValue === "") {
                return item;
              } else if (
                item.name.toLowerCase().includes(debouncedValue) ||
                item.brand?.toLowerCase().includes(debouncedValue)
              ) {
                return item;
              }
            })
            .map((item) => (
              <Item key={item.id} {...item} />
            ))}
        </div>
      )}
      {sortType === "Storage Area" && (
        <ItemsByStorageArea storageAreaId={storageAreaId!} />
      )}
      {sortType === "Food Type" && (
        <ItemsByFoodType
          foodTypeIds={foodTypeIds}
          foodTypesList={foodTypesList}
        />
      )}
      {sortType === "Expiring Soon" && (
        <div className="flex flex-col gap-1">
          <Banner>Expiring Soon</Banner>
          {itemsSortedByExpiringSoon
            ?.filter((item) => {
              if (debouncedValue === "") {
                return item;
              } else if (
                item.name.toLowerCase().includes(debouncedValue) ||
                item.brand?.toLowerCase().includes(debouncedValue)
              ) {
                return item;
              }
            })
            .map((item) => (
              <Item key={item.id} {...item} />
            ))}
        </div>
      )}
    </div>

如前所述，除了移动设备外，它在开发或在线的任何设备上都能正常工作。

注意：我不确定它是否重要，但我只能在安卓设备上测试它。

更新：我已经将 debouncedValue 打印到屏幕上，它确实显示为输入，因此它似乎不是移动键盘的问题。

谢谢！

Answer 1

问题是我的项目属性名称和品牌有 toLowerCase()，但我的 debouncedValue 没有，移动键盘会自动将第一个字母输入大写。太棒了