Estoy tratando de esperar 2 segundos cuando un texto de entrada contiene texto y hago una solicitud a mi API. Escribí esta función como un gancho de reacción llamado useBounce:
const useDebounce = (func, milliseconds) => { const time = milliseconds || 400 let timer return event => { if (timer) { clearTimeout(timer) } timer = setTimeout(func, time, event) } } export default useDebounceAsí que tengo una entrada con onChange que cuando trato de escribir reaccionar no me permite hacerlo y la función de llamada a mi API no se ejecuta:
const searchDebounce = useDebounce((e) => { setInput(e.target.value); e.preventDefault() console.log(e.target.value) }, 2000) return ( <> <input type="text" onChange={ searchDebounce } value={input} className='border-2 border-cyan-500' /> </> )Por ahora estoy tratando de ver lo que está escrito en la entrada a través de la consola, pero como no me permite escribir, la consola está en blanco.
Gracias por tu ayuda.
funciona con su código con cambios menores, no sé exactamente por qué aunque
const useDebounce = (func, milliseconds) => { const time = milliseconds || 400; let timer; return (event) => { if (timer) { clearTimeout(timer); } timer = setTimeout(func, time, event.target?.value); }; }; const [input, setInput] = useState(''); const searchDebounce = useDebounce((e) => { setInput(e); }, 2000); return ( <> <input type="text" onChange={searchDebounce} className="border-2 border-cyan-500" /> </> ); la cuestión es que si desea implementar la función de rebote para buscar algo por su entrada, no debe eliminar el rebote de la función para actualizar el estado de entrada ( setInput ), ya que también retrasará el valor de entrada de texto cuando el usuario está escribiendo.
A continuación se muestra el ejemplo para el mismo
const useDebounce = (value, delay) => { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const handler = setTimeout(() => { setDebouncedValue(value); }, delay); return () => { clearTimeout(handler); }; }, [value]); return debouncedValue; }; lo anterior es mi gancho useDebounce personalizado y para retrasar la verificación de entrada debajo del código
export const Debouncing = () => { const [value, setValue] = useState(""); const delayedValue= useDebounce(value, 2000); // useEffect(()=>{ //apiCall() api call goes here //},[delayedValue]); return ( <> <h1>Debouncing</h1> Current: {value} - Debounced: {delayedValue} <input value={value} onChange={(e) => setValue(e.target.value)} style={{ margin: "30px" }} placeholder="input search" /> </> ); };