时间戳

首页 > 解决方案 > 如何在反应中使用useDebounce进行搜索功能

javascript - 如何在反应中使用useDebounce进行搜索功能

问题描述

当用户在搜索功能中搜索用户时，我正在尝试使用 useDebounce。在这种情况下如何添加 useDebounce？

import { useDebounce } from "use-debounce";
const [searchQuery, setSearchQuery] = useState("");
const [invitees, setInvitees] = useState([]);

  const handleChange = (event) => {
    event.preventDefault();
    setSearchQuery(event.target.value);
  };

  const getUserToInvite = async () => {
    const res = await axios.get(
      `/api/v1/search/users/invite/${searchQuery}/${teamId}`
    );
    setInvitees(res.data[0]);
    setShowInvitees(!showInvitees);
  };

  useEffect(() => {
    if (searchQuery === "") {
      setInvitees([]);
    }

    if ((searchQuery || "").length >= 2) {
      getUserToInvite();
    }
  }, [searchQuery]);


          <input
            className="invitees--search_input"
            type="text"
            name="name"
            onChange={handleChange}
            placeholder="Name"
            aria-label="Search bar"
            pattern="^[a-zA-Z0-9 ]+"
            required
          />

你如何在 React.js 中执行去抖动？

标签： javascriptreactjsreact-hooks

解决方案

我认为你可以通过简单地去抖动值来处理这个问题。所以像

const [searchQuery, setSearchQuery] = useState("");
const debouncedSearchQuery = useDebounce(searchQuery, 500)

useEffect(() => {
    if (debouncedSearchQuery === "") {
      setInvitees([]);
    }

    if ((debouncedSearchQuery || "").length >= 2) {
      getUserToInvite();
    }
  }, [debouncedSearchQuery]);

如果您希望消除回调，那就有点不同了。但是use-debounce文档很好地解释了它！ https://github.com/xnimorz/use-debounce#debounced-callbacks

推荐阅读