RTK 查询仅在用户停止在搜索字段中输入后运行查询

Question

我对使用 useEffect、useCallback 和运行 RTK 查询有点困惑。我想要实现的目标是用户能够根据应用程序中提供的输入字段搜索电影。

有一个带有输入字段的主页，供用户搜索电影。另外，我在 RTK 查询 API 中有一个 useSearchMovieQuery ，它可以搜索用户在搜索字段中输入的任何内容。我想阻止查询在初始渲染上运行，这可以通过使用“skip”或“skipToken”跳过查询来实现。

我只想在用户停止输入后运行此查询，而不是在搜索字段中的 onChange 事件之后立即运行。

这是我到目前为止所尝试过的。

const Home = () => {
  const [page, setPage] = useState<number>(1);
  const [skip, setSkip] = useState<boolean>(true);
  const [searchQuery, setSearchQuery] = useState<string>("");
  const { data: popularMovies, isLoading: popularLoading } =
    useGetPopularMoviesQuery(page);
  const { data: topRatedMovies, isLoading: topRatedLoading } =
    useGetTopRatedMoviesQuery();
  const { data: upcomingMovies, isLoading: upcomingLoading } =
    useGetUpcomingMoviesQuery();
  const {
    data: searchResult,
    isSuccess: searchedForMovie,
    isFetching,
    isError,
  } = useSearchMovieQuery(searchQuery, { skip });
  const handleOnChangePage = (e: unknown, value: number) => {
    setPage(value);
  };
  const handleSearch = (
    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    setSearchQuery(event.currentTarget.value);
    setSkip((prev) => !prev);
  };

  return (
    <>
      <div className="category-box container">
        <div className="section mb-3">
          <FormControl fullWidth sx={{ m: 1 }}>
            <OutlinedInput
              id="outlined-adornment-amount"
              placeholder="Search Movies..."
              value={searchQuery}
              onChange={handleSearch}
            />
          </FormControl>
          {searchedForMovie && (
            <SearchResult>
              <MoviesList moviesType={searchResult.results} />
            </SearchResult>
          )}
</>

令人困惑的是，我想将skip设置为true以开始查询搜索，并且仅在用户停止输入后运行它。也许使用setTimeout？

我用于跳过查询的状态是：

const [skip, setSkip] = useState<boolean>(true);

我用于用户搜索查询的状态是：

  const [searchQuery, setSearchQuery] = useState<string>("");

为输入运行 onChange 事件的handleSearch 函数是：

      const handleSearch = (
    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    setSearchQuery(event.currentTarget.value);
    setSkip((prev) => !prev);
  };

句柄搜索函数中的 setSkip 是迄今为止我知道不应该存在的问题之一：D

有什么帮助吗？

Answer 1

我会用类似的东西useDebounce

const [searchQuery, setSearchQuery] = useState<string>("");
const debouncedSearchQuery = useDebounce(searchQuery, 500);
  const {
    data: searchResult,
    isSuccess: searchedForMovie,
    isFetching,
    isError,
  } = useSearchMovieQuery(debouncedSearchQuery, { skip: debouncedSearchQuery == "" });

这样，只有当 searchQuery 在过去 500 毫秒内没有更改且不是空字符串时，您才会进行搜索。