Estoy tratando de configurar un temporizador para onChange pero no entiendo por qué no funciona. Probé varios métodos, pero ninguno funcionó. ¿Qué puedo cambiar para que funcione?
import React, {useState} from 'react' import { debounce } from "lodash"; const Search = ({getQuery}) => { const [text, setText] = useState('') const onChange = (q) => { setText(q) getQuery(q) } const handleDebounce = () => { debounce(onChange, 3000); }; return ( <section className='search'> <form> <input type='text' className='form-control' placeholder='Search characters' value={text} onChange={(e) => handleDebounce( onChange(e.target.value), 3000)} autoFocus /> </form> </section> )} export default Searchelimine handleDebounce por completo y llame a su propio onChange en la entrada onChange
onChange={onChange} luego ajuste su implementación onChange como:
const onChange = (e) => { const query = e.target.value; setText(query); debounce(() => getQuery(query), 3000); }