呈现自动填充的搜索结果 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
关于您的代码,我有多个注释:
- 使用 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)
}
请让我知道我在哪里做错了,因为我是 React 的新手,而且我是第一次在实时项目中实现这些概念
This is place where data is getting processed
关于您的代码,我有多个注释:
- 使用 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)
}