呈现自动填充的搜索结果 Debounce 在 React 中不起作用,我无法在 useEffect 中调用我的 debounce

To render auto populated search result Debounce is not working in React and i am not able to call my debounce inside useEffect

请让我知道我在哪里做错了,因为我是 React 的新手,而且我是第一次在实时项目中实现这些概念

This is place where data is getting processed

关于您的代码,我有多个注释:

  1. 使用 debounce 或 throttle。但是不要一起使用它们。您可以找到对这两种技术的很好的解释 here.
  2. 从 useEffect 中删除您的依赖项。在您的情况下, useEffect 将在每次输入更改+每次设置提取时执行。从您发布的这段代码来看,您实际上没有使用 useEffect 的意义。 Render 可以由 useMemo 处理。
  3. useMemo 必须有自己的依赖数组。在您的情况下,它在每个渲染器上执行。所以你需要将它的依赖从 useEffect 移动到 useMemo。例如你可以做 const inputHasChanged = useMemo(() => debounce(rxCometGetFindUsers, 500), [inputValue]);

因此,要使其正常工作,您需要:

我以前没有使用过“自动完成”,所以我不确定您必须包括哪些选项。

 return (
    <Autocomplete
      id="find-user"
      className="autoCompSearch"
      style={{ width: 370 }}
      getOptionLabel={option => getValues(option)}
      defaultValue={defaultObj || ""}
      filterOptions={x => x}
      options={options}
      autoComplete
      includeInputInList
      freeSolo
      disableOpenOnFocus
      renderInput={params => (
        <TextField
          {...params}
          placeholder="GLOBAL SEARCH"
          fullWidth
          onChange={handleChange}
          onKeyDown={onKeyDownHandler} // I would remove this, dont see a reason why you would need this and onChange
        />
      )}

这很好

    const handleChange = event => {
event.preventDefault();
console.log("User has entered" +event.target.value);
setInputValue(event.target.value);
 };

接下来,您可以使用 debounce function from lodash,但问题是您可能有一个异步函数,因为您需要获取一些东西。来自 lodash 的去抖无法处理这种行为。 所以你需要使用 p-debounce.

import pDebounce from 'p-debounce';

const inputHasChanged = useMemo(() => pDebounce(rxCometGetFindUsers, 500), [inputValue]);

const rxCometGetFindUsers = async = () =>{

let newData = await ... //do your fetching
setOptions(newData)
}