当用户停止输入时在 React 中执行函数

Question

我想在使用停止输入（或按回车键）时执行一个功能（查询搜索服务） 我看到了一些使用 lodash Debounce 的例子

我正在玩 react hooks，想看看是否可以在没有任何外部库的情况下实现这一点。

import React, { useState } from 'react';
import Api from './Api'

const Search = (props) => {

    const [keyword, setKeyword] = useState();
    const [results, setResults] = useState([]);

    let timeout;

    const handleSearch = (event) => {

        setKeyword(event.target.value);

        if (timeout) {
            clearTimeout(timeout);
        }

        timeout = setTimeout(() => {
            timeout = null;

            if (keyword) {
                callSearchService()
            }
        }, 1000);
    }

    const callSearchService = () => {
        Api.search(keyword)
            .then(
                results => setResults(results),
                error => console.log(error)
            )
    }

    return (
        <input type="search" onKeyUp={(e) => handleSearch(e)} />
    )

}

执行被延迟了 1000 毫秒，但随后每个字符调用一次该函数（最后一个字符除外。这没有被执行，我尝试使用 onChange 而不是 onKeyUp，但同样的问题）。我可能把超时放在错误的地方。感谢您的无限智慧

Answer 1

绝对！您可以使用useEffect 和useState 实现自己的去抖动功能。在此示例中，value 是您的用户输入，setTimeout 回调中的代码仅在 value 1 秒后未更改时才会执行。

const [value, setValue] = useState("");

useEffect(() => {
  const callSearchService = () => {
    Api.search(value)
      .then(
        results => setResults(results),
        error => console.log(error)
      )
  }

  let debouncer = setTimeout(() => {
    callSearchService();
  }, 1000);
  return () => {
    clearTimeout(debouncer);
  }
}, [value]);

这里真正重要的是“清理”功能，如果value 发生变化，它会清除超时。如果 1 秒后实际上没有任何 value 更改，则 setTimeout 回调函数中的代码将实际执行。