Tengo una función que filtra a través de algún estado y muestra el resultado de una solicitud de búsqueda.
const handleSearch = (value: string) => { const searchResultData = users.filter((userId) => user.id.startsWith(value)); setSearchResult(searchResultData); }; Estoy tratando de trabajar con la biblioteca lodash.throttle para causar un retraso antes de que se envíe la solicitud. Por lo tanto, no tenemos una solicitud cada vez que un usuario escribe.
const handleSearch = useCallback(throttle((value: string) => { const searchResultData = users.filter((userId) => user.id.startsWith(value)); setSearchResult(searchResultData); }, 2500), []); Esto funciona al retrasar la entrada como se esperaba, pero por alguna razón, el método user.filter no se ejecuta y, por lo tanto, el estado no se actualiza con el resultado de la búsqueda. Creo que el problema podría deberse al useCallback , pero la función de throttle depende de que se ejecute. ¿Alguna idea sobre cómo puedo solucionar este problema?
Si su controlador acelerado/rebotado usa accesorios o estado, como este:
const { fetcherFunctionFromProps } = props; const eventHandler = async () => { const resp = await fetcherFunctionFromProps(); }; const debouncedEventHandler = useMemo( () => throttle(eventHandler, 300) ), [fetcherFunctionFromProps]); Y no funciona,
puedes refactorizarlo a lo siguiente:
const { fetcherFunctionFromProps } = props; const eventHandler = async (fetcher) => { const resp = await fetcher(); }; const debouncedEventHandler = useMemo(() => throttle(eventHandler, 300), []); ... <Component onClick={() => debouncedEventHandler(fetcherFunctionFromProps)}>