React handle autocomplete等待一段时间加载动态数据[重复]

Question

我有一个自动完成组件，默认情况下，它没有数据显示。当用户键入某个内容时，它将动态加载数据。但我希望在用户停止键入时执行此操作，而不是每次都快速输入内容。所以我等待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);
}

Answer 1

代码中有两个问题。

1-setState是异步运行的，因此setSearchStr不会立即更改searchStr

2每次输入更改时，都会创建一个新的setTimeout，因此在从第一个字符输入开始的1500ms之后，它将失去其效果。你要做的事情叫做去平衡。解决方案是在创建一个新的之前清除之前的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);
  }
}

如果您坚持将搜索值保存在有状态变量中，您可以使用use效应：

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