反应处理自动完成等待一段时间以加载动态数据[重复]

Posted 2023-02-21

【中文标题】反应处理自动完成等待一段时间以加载动态数据[重复]

【英文标题】：React handle autocomplete waiting for some time to load dynamic data [duplicate]

【发布时间】：2021-06-11 03:31:28

【问题描述】：

我有一个自动完成组件，默认情况下它没有要显示的数据。当用户键入内容时，它将动态加载数据。但我希望在用户停止输入时完成此操作，而不是每次都快速输入内容。所以我等待 1500 毫秒，然后检查字符串是否已更改。但是代码没有按我预期的方式工作。

const dispatch = useDispatch();
const [searchStr, setSearchStr] = useState(null);

function handleChange(event) 
    const str = event.target.value.toLowerCase();

    if (str.length < 2) return;

    setSearchStr(str);

    setTimeout(() => 
      // str never equals searchStr
      console.log(str, searchStr)
      if(str === searchStr) 
         dispatch(doSearch(searchStr));
      
    , 1500);

【参考方案1】：

您的代码中有两个问题。

1- setState 是异步运行的，所以 setSearchStr 不会立即更改 searchStr 的值

2- 每次输入更改时，都会创建一个新的setTimeout，因此在第一个字符输入后 1500 毫秒后，它将失去效果。你要做的事情叫做debouncing。解决方法是在创建新的之前清除之前的setTimeouts：

let timer; // =========> HERE

function MyComponent() 
  const dispatch = useDispatch();
  const [searchStr, setSearchStr] = useState(null);

  function handleChange(event) 
    const str = event.target.value.toLowerCase();

    if (str.length < 2) return;

    setSearchStr(str);

    clearTimeout(timer); // =========> HERE

    timer = setTimeout(() => 
       dispatch(doSearch(str));
    , 1500);
  

如果你坚持将搜索值保存在有状态变量中，可以使用useEffect：

let timer; // =========> HERE

function MyComponent() 
  const dispatch = useDispatch();
  const [searchStr, setSearchStr] = useState(null);

  function handleChange(event) 
    const str = event.target.value.toLowerCase();

    setSearchStr(str);
  

  useEffect(() => 
    if (searchStr.length < 2) return;

    clearTimeout(timer);

    timer = setTimeout(() => 
       dispatch(doSearch(searchStr));
    , 1500);
  , [searchStr])