反应提到去抖动输入文本

Question

我正在使用反应提及来允许用户在聊天中@某人。这些建议是从后端加载的。用户输入“@”后，我只想在他们停止输入后点击一次服务器。我尝试使用 lodash debounce，但我认为我没有正确使用它，因为它所做的只是等待一段时间，然后多次调用服务器。

const fetchUsernames = debounce((query, callback) => {
    if (query.length > 2) {
      console.log("fetching usernames for query", query);
      axios
        .get(`users/query/${query}`)
        .then((response) => {
          if (response.data)
            return response.data.map((u) => ({ id: u, display: u }));
          else return [];
        })
        .then(callback);
    }
  }, 1000);

return (
    <MentionsInput
      value={message}
      onChange={(e) => setMessage(e.target.value)}
    >
      <Mention
        trigger="@"
        data={fetchUsernames}
      />
    </MentionsInput>
  );

Answer 1

您可以通过将 fetchUsernames 移动到组件外部来修复

更新：如果你想在组件中使用fetchUsernames，可以像这样使用useCallback。

const fetchUsernames = useCallback(
    debounce((query, callback) => {
      ...
    }, 1000),
    []
  );

反应提到去抖动输入文本

react-mentions debounce input text

reactjs

autocomplete

debounce