Problema: en el siguiente código, traté de escribir "rojo" continuamente y después de 2 segundos, apareció "red" en el cuadro de texto. Luego, después de unos segundos, traté de escribir "re" continuamente. Ahora, después de 2 segundos, obtuve "EL DESBORDAMIENTO DE LA PILA NO ME PERMITE PROPORCIONAR SALIDA AQUÍ".

Por favor, inténtelo usted mismo.

 import React from 'react'; import { useCallback, useEffect, useState } from 'react'; import './style.css'; export default function App() { const [inputValue, setInputValue] = useState(''); function debouce(fn) { let timeout; return function() { console.log("final", arguments[0]) clearTimeout(timeout); timeout = setTimeout(() => fn.apply(this, arguments), 1000); }; } const getvalue = debouce(setInputValue); let a = ""; const handleChange = useCallback((e) => { const value = e.target.value; a = a+ value; console.log('targetvalue', a); getvalue(a); }, []); return ( <div> <input onChange={handleChange} value={inputValue} /> <h1>Hello StackBlitz!</h1> <p>Start editing to see some magic happen :)</p> </div> ); }

Enlace de demostración: https://stackblitz.com/edit/react-nh3ty2

¿Por qué? ¿Alguien puede explicar por favor cómo hacerlo correctamente también?

ACTUALIZACIÓN: entendí que el decorador de rebote no se puede modificar según los criterios requeridos, así que estoy cambiando desde el código a continuación

 function debouce(fn) { let a = '', timerid; return function (e) { a = a + e; clearTimeout(timerid); timerid = setTimeout(function () { fn.apply(this, [a]); a = ''; }, 2000); }; }

a esto

 function debouce(fn) { let timeout; return function() { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, arguments), ms); }; }