0
78
Vistas¿Por qué `setTimeout` llama más de una vez cuando uso `useState`?
Estoy tan confundido acerca de useState en los ganchos React.
No sé por qué console.log en la función setTimeout llama más de una vez cuando uso useState .
Si useState , normalmente llama solo una vez. Y si uso Class state en lugar de ganchos, normalmente también llama solo una vez.
¿Por qué sucede eso? ¿Y cómo puedo manejarlo?
(aquí está mi código)
import React, { useState, useEffect } from "react"; import "./App.css"; const usePassword = () => { const [passwordValue, setPasswordValue] = useState({ password: "", passwordHidden: "", }); let timer = null; const trigger = () => { clearTimeout(timer); timer = setTimeout(() => console.log("end"), 1000); }; const onPasswordChanged = (name, value) => { setPasswordValue((prev) => ({ ...passwordValue, passwordHidden: value })); trigger(); }; return { passwordValue, onPasswordChanged }; }; function App() { const { passwordValue, onPasswordChanged } = usePassword(); const onChanged = (event) => { const { name, value } = event.target; onPasswordChanged(name, value); }; const onSubmit = () => { console.log("submitted!", passwordValue); }; return ( <div className="App"> <header className="App-header"> <input name="password" onKeyUp={onChanged} /> <button onClick={onSubmit}>Submit</button> </header> </div> ); } export default App;
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Cada vez que establece el estado usando useState , obtiene una nueva variable de timer , ya que la función se llama nuevamente. Es por eso que su clearTimeout no funciona.
Puede usar una ref para mantener el valor entre los ciclos de renderizado:
const timer = useRef(null); const trigger = () => { clearTimeout(timer.current); timer.current = setTimeout(() => console.log("end"), 1000); }; 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta