使用useMemo和useCallback实现debounce

Question

我有一个列表，我想要过滤并返回该列表以显示在屏幕上。这个列表来自于一次返回所有数据的api。我的debounce函数是这样的

const debouncedFn = React.useCallback((fn: Function, delay: number) => {
let timer: any = null;
return (...args: any) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};}, []);

我在useMemo钩子中调用这个，像这样

let filteredItems = React.useMemo(() => {

const p = debouncedFn(filterList, 400);
console.log("p", p());
return p();
}, [debouncedFn]);

filterlist函数是这样的

const filterList = () => {
return userList.filter((x: any) => x.advertiser_name.includes(filterValue));
};

我期待在filteredItems中过滤的结果，但它是未定义的。

Answer 1

我不知道你想达到什么目的，但这听起来不太符合React的习惯。

得到undefined因为p()实际上相当于调用这个函数:

(...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
}

可以看到这个函数没有返回值，因此它返回undefined。如果你输入一个返回值，你会看到你会得到那个返回值。然而，这并不是你真正想要的，所以我建议重新考虑你的方法并使用一些state。