渲染自动填充的搜索结果 Debounce 在 React 中不起作用，我无法在 useEffect 中调用我的 debounce

如何解决渲染自动填充的搜索结果 Debounce 在 React 中不起作用，我无法在 useEffect 中调用我的 debounce

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

这是处理数据的地方

解决方法

关于您的代码，我有多个注释：

使用去抖或节流。但不要同时使用它们。您可以找到对这两种技术的非常好的解释 here。
从 useEffect 中删除您的依赖项。在您的情况下， useEffect 将在每次输入更改 + 每次设置提取时执行。从您发布的这段代码来看，实际上您没有使用 useEffect 的意义。渲染可以由 useMemo 处理。
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 中的 lodash 函数，但问题是您可能有一个异步函数，因为您获取了一些东西。从 lodash 去抖动无法处理这种行为。所以你需要使用 p-debounce。

import pDebounce from 'p-debounce';

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

const rxCometGetFindUsers = async = () =>{

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