Правило перехвата, которое вы нарушаете, касается useCallback
, потому что вы возвращаете его как результат своих fetchData;
useCallback
следует вызывать на верхнем уровне; не в обратном вызове, например:
const fetchData = useCallback(
() => {
if (!isEmpty(searchParams)) {
setIsLoading(true); // this is a state hook
fetchData(searchParams)
.then((ids) => {
setIds(ids); // Setting the id state here
}).catch(() => setIsLoading(false));
}
},
[],
);
Код, который вы написали, эквивалентен
const fetchData = () => { return React.useCallback(...
или даже
function fetchData() { return React.useCallback(...
Чтобы узнать больше о том, почему вы не можете этого сделать, я настоятельно рекомендую сообщение в блоге .
изменить:
Чтобы использовать дебагованный searchParams
, вам не нужно дебатировать функцию, которая выполняет вызов, а скорее дебатировать искомое значение. (и на самом деле вы вообще не используете функцию fetchData, которая вызывает React.useCallback, просто используйте ее прямо в вашем useEffect
)
Я рекомендую использовать этот useDebounce
хук для отката Ваш поисковый запрос
const [searchParams, setSearchParams] = React.useState('');
const debouncedSearchParams = useDebounce(searchParams, 300);// let's say you debounce using a delay of 300ms
React.useEffect(() => {
if (!isEmpty(debouncedSearchQuery)) {
setIsLoading(true); // this is a state hook
fetchData(debouncedSearchParams)
.then((ids) => {
setIds(ids); // Setting the id state here
}).catch(() => setIsLoading(false));
}
}, [debouncedSearchParams]); // only call this effect again if the debounced value changes