使用反应钩子去抖动（几秒钟内仅触发一次）

Question

我需要对用户输入实现标签搜索，但输入速度很快，我不想为用户输入的每个符号触发 DB 调用，所以我很好奇，有没有一种简单的好方法来消除 api 调用，让我们说 - 一个延迟 3 秒后的时间？

现在我想出了这个：

  let searchDelay
  async function handleTagSearch(e) {
    clearTimeout(searchDelay)

    tagSearchPhraseSet(e.target.value)

    searchDelay = setTimeout(async () => {
      if (e.target.value.length > 3) {
        let res = await fetch('api/tag_seatch/' + e.target.value)
        res = await res.json() 

        console.log(res)
      }
    }, 3000)
  }

但这是一个正确的方法吗？

Answer 1

您的解决方案看起来很有希望，如果您确保searchDelay使用例如useRef钩子在渲染之间保留该数字。

另一种方法是使用useEffect每次输入value更改时运行的钩子。从提供给useEffect您的函数中，您可以返回一个清除上一次运行超时的函数。

例子

const { useState, useEffect } = React;

function App() {
  const [value, setValue] = useState("");
  const [result, setResult] = useState(null);

  useEffect(
    () => {
      if (value.length < 3) {
        setResult(null);
        return;
      }

      const timeout = setTimeout(() => {
        setResult(Math.random());
      }, 3000);

      return () => clearTimeout(timeout);
    },
    [value]
  );

  return (
    <div>
      <input value={value} onChange={e => setValue(e.target.value)} />
      <div>{result}</div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>