Quiero implementar diferentes búsquedas de api en un componente de React y uso un enlace personalizado.
const { request:requestOne, data, loading} = useApi(searchOneApiConfig); const { request:requestTwo, data, loading} = useApi(searchTwoApiConfig); const { request:requestThree, data, loading} = useApi(searchThreeApiConfig);ahora tengo que usar useCallback(debounce... para cada uno como:
const SearchLazyQueryOne = useCallback(debounce(requestOne, DEBOUNCED_TIME, LazyQueryConfig), []); const SearchLazyQueryTwo = useCallback(debounce(requestTwo, DEBOUNCED_TIME, LazyQueryConfig), []); const SearchLazyQueryThree = useCallback(debounce(requestThree DEBOUNCED_TIME, LazyQueryConfig), []);Mi pregunta es ¿cómo puedo tener un solo "searchLazyQuery" y pasar la función de solicitud dinámica?
(Estoy usando el rebote de debounce ).
Entonces parece que quieres usar:
searchLazyQuery(requestTwo, /*...args*/) ...mientras elimina el rebote de las llamadas a requestTwo . Eso requerirá realizar un seguimiento de las funciones rebotadas y usar la correspondiente (o crear una según sea necesario).
Puede almacenar las versiones rebotadas de la función en un Map . Aquí hay un boceto de un gancho que hace eso:
const useDynamicDebounce = (debouncedTime, config) => { // Using a ref to provide a stability guarantee on the function we return const ref = useRef(null); if (!ref.current) { // A map to keep track of debounced functions const debouncedMap = new Map(); // The function we return ref.current = (fn, ...args) => { // Get the debounced version of this function let debounced = debouncedMap.get(fn); if (!debounced) { // Don't have one yet, create it debounced = debounce(fn, debouncedTime, config); debouncedMap.set(fn, debounced); } // Do the call return debounced(...args); }; } return ref.current; };Usándolo en tu componente:
const searchLazyQuery = useDynamicDebounce(DEBOUNCED_TIME, LazyQueryConfig); Luego use searchLazyQuery(requestTwo, "args", "for", "requestTwo") (por ejemplo).