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

oxf4rvwz 于 2022-11-30 发布在 TypeScript

关注(0)|答案(1)|浏览(113)

我有一个搜索输入，它更新查询参数，并在每个onChange事件上触发该特定路由的React路由器加载器中的API调用。我如何防止在每次击键时调用API，并实现类似防反跳效果的东西（当用户1000毫秒内未键入时，则调用API或更新查询参数）。注意：我知道有一个去抖钩和逻辑，但我感兴趣的是，如果它是有可能实现与React路由器只。
更新查询参数逻辑组件：

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调用。

typescript

来源：https://stackoverflow.com/questions/74615375/how-to-debaunce-search-query-in-react-router-v6-4-3

1条答案

按热度按时间

7nbnzgx91#

您可以尝试从lodash使用去抖动

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，
希望对你有帮助

赞(0）回复(0）举报 2022-11-30

我来回答

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

1条答案

相关问题

热门标签

最新问答