[React在用户停止输入时执行功能

Posted 2021-04-13

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

我在玩React钩子，想看看是否有可能在没有任何外部库的情况下实现这一目标。

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)} />
    )

}

执行被延迟了1000ms，但随后每个字符调用一次该函数（最后一个字符除外。该字符未执行，我尝试使用onChange代替onKeyUp，但存在相同问题）。我可能将超时错误的位置。感谢您的无限智慧

答案

绝对！您可以使用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回调函数中的代码将实际执行。