如何在 react-router v6.4.3 中消除搜索查询

Question

我有一个搜索输入，它更新查询参数并在每个 onChange 事件上触发 react-router 加载程序中针对该特定路由的 API 调用。 我如何防止在每次击键时调用 API 并实现诸如去抖动效果之类的东西（当用户没有输入 1000 毫秒时，然后调用 API 或更新查询参数）。笔记：我知道有一个 debounce hook 和逻辑，但我很感兴趣是否可以只用 react-router 来实现。

我有更新查询参数逻辑的组件：

const [searchParams, setSearchParams] = useSearchParams();
  const countryQuery = searchParams.get("country") || "";

  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.preventDefault();

    setSearchParams(
      { country: event.target.value }
    );
  };

装载机：

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  const countryQuery = url.searchParams.get("country") || "";

  const countries = getCountries(countryQuery);

  return countries;
};

我想防止不必要的 API 调用。

Answer 1

您可以尝试使用 lodash 的 debounce

import { debounce, filter, get, join, map } from 'lodash';

在二传手上使用的更简单的版本

  const debouncedOnChange = useCallback(
         debounce((event: React.ChangeEvent<HTMLInputElement>) => {
            event.preventDefault();

            setSearchParams(
               { country: event.target.value }
            );

         }, 300), []);

如果在句柄搜索中需要引用其他变量，可以使用Ref

const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.preventDefault();

    setSearchParams(
      { country: event.target.value }
    );
};

  const searchRef = useRef(handleOnChange);
  searchRef.current = handleOnChange;

  const debouncedOnChange = useCallback(debounce(searchRef.current, 300), []);

您可以尝试使用 debouncedOnChange 代替 handleOnChange

希望对你有帮助