2

estoy tratando de implementar un buscador con react, el problema que no puedo resolver es que espere 2 segundos a que el usuario deje de escribir en el input, es decir, si el cliente escribe hola, que espere 2 segundos a realizar la peticion pero si no ha transcurrido dicho tiempo y el usuario presiona nuevamente otra tecla, que el contador vuelva a cero, esto a modo de no realizar bastantes llamadas a la api

import React, { useEffect, useState } from 'react';
import './style.css';

export default function App() {
  const [empresa, setEmpresa] = useState('');
  useEffect(() => {
    console.log(empresa);
    if (empresa.length > 0) {
      //realizar peticion get despues de esperar 2 segundo sin que el usuario escriba nada
    }
  }, [empresa]);

  return (
    <div>
      <input type="text" onChange={(e) => setEmpresa(e.target.value)} />
    </div>
  );
}

1
  • no entiendo porque quieres ese comportamiento, deberia llamarse la api una vez que el usuario presiono enter Commented el 28 mar. 2022 a las 19:10

2 respuestas 2

1

Una forma simple de realizar lo que tienes en mente, seria con la ayuda de setTimeout y clearInterval

setTimeout: Realizara la petición después de cierto tiempo configurado en milisegundos.

clearInterval: Reseteara setTimeout en caso de que el usuario vuelva a escribir en el lapso de tiempo configurado.

import React, { useEffect, useState } from 'react';
import './style.css';

export default function App() {
  const [empresa, setEmpresa] = useState('');
  let busquedaEmpresa;
  useEffect(() => {
    console.log(empresa);
    if (empresa.length > 0) {
      //realizar peticion get despues de esperar 2 segundo sin que el usuario escriba nada

       busquedaEmpresa = setTimeout( ()=>{
          console.log("peticion");
       }, 2000 );
    }


    return ()=>{
       clearInterval( busquedaEmpresa );
    }

  }, [empresa]);

  return (
    <div>
      <input type="text" onChange={(e) => setEmpresa(e.target.value)} />
    </div>
  );
}


Saludos.

1
  • muchas gracias, era la solución que estaba buscando!
    – rootkali
    Commented el 28 mar. 2022 a las 19:52
1

Aqui te pongo un ejemplo de como se podria hacer, seguramente debe haber mas optimizados, pero este funciona:

import React, { useEffect, useState } from "react";

const App = () => {
  const [empresa, setEmpresa] = useState(null);

  useEffect(() => {
    document.addEventListener("keydown", getKey);

    function getKey(e) {
      if (e.code === "Enter")
        alert(`Llamamos a la api de busqueda con empresa = ${empresa}`);
    }

    return () => {
      document.removeEventListener("keydown", getKey);
    };
  }, [empresa]);

  return (
    <div>
      <input type="text" onChange={(e) => setEmpresa(e.target.value)} />
    </div>
  );
};

export default App;

En el useEffect que se ejecuta cada vez que empresa cambia (entras una letra) pongo un listener que evalua si la tecla presionada es ENTER, si es asi disparo un Alert() con el valor de empresa. Reemplaza el alert por la peticion y listo. El remove listener es para no saturar la memoria con los eventos. Espero te sirva

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.