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

Question

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

This is place where data is getting processed

Answer 1

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

使用 debounce 或 throttle。但是不要一起使用它们。您可以找到对这两种技术的很好的解释 here.
从 useEffect 中删除您的依赖项。在您的情况下， useEffect 将在每次输入更改+每次设置提取时执行。从您发布的这段代码来看，您实际上没有使用 useEffect 的意义。 Render 可以由 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 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)
}

呈现自动填充的搜索结果 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

javascript

reactjs

react-native

react-hooks

debouncing