我第一次嘗試應用 lodash 油門。
我知道必須在 a 內部應用油門，useCallback否則每次重新渲染都會呼叫它（在我的情況下，每次用戶搜索的新擊鍵都會呼叫它）。
我擁有的代碼是有效的，并且邏輯似乎很有意義 - 但是沒有應用油門，因此每次擊鍵都會進行 api 呼叫。
關于我的邏輯在哪里失敗的任何指示？
import {
useEffect,
useCallback
} from 'react';
import { throttle } from 'lodash';
import { getAllUsers } from '../../../api/api';
import { USER_ROLE } from '../../../types/types'
interface IProps extends Omit<unknown, 'children'> {
search?: string;
}
const DemoFanManagementTable = ({ search }: IProps): JSX.Element => {
const getFans = (search?: string) => {
console.log("getFans ran")
const fans = getAllUsers({ search }, USER_ROLE.FAN);
//logs a promise
console.log("logging fans ", fans)
return fans;
}
//throttledSearch is running every time search changes
const throttledSearch = useCallback((search?: string) => {
console.log("throttledSearch ran")
return throttle(
//throttle is not throttling, functions run every keystroke
() => {
getFans(search), 10000, { leading: true, trailing: true }
}
)
}, [search])
//useEffect is running every time search changes
useEffect(() => {
return throttledSearch(search)
}, [search]);
return (
<div>
{search}
</div>
);
};
export default DemoFanManagementTable;
uj5u.com熱心網友回復：
這里有一些問題，首先你將洞throttle函式包裝在一個匿名函式中，而不僅僅是第一個引數：
throttle(
(search: string) => getFans(search),
1000,
{ leading: true, trailing: true }
)
SeconduseCallback不適合，因為每次呼叫它時，它都會回傳一個新的節流函式。
第三，您已經[search]作為依賴項傳遞，useCallback即使它按預期作業，每次search更改時它都會失效并且無論如何都不起作用。
更好的選擇是useMemo因為它在渲染中保持相同的節流功能。
const throttledSearch = useMemo(
() =>
throttle(
(search: string) => getFans(search),
10000,
{ leading: true, trailing: true }
),
[]
);
useEffect(() => {
return throttledSearch(search);
}, [search]);
由于 getFans 采用相同的搜索引數，您可以將其縮短為：
const throttledSearch = useMemo(() =>
throttle(getFans, 10000, { leading: true, trailing: true }),
[]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/445969.html
標籤：javascript 反应 打字稿 罗达什 节流
下一篇：如何回傳React中按下的鍵的值