Estoy usando next js para mi aplicación web. Quiero escribir una función que actualice la posición de desplazamiento usando useState . Por alguna razón, useState no se actualiza correctamente, ya que también necesito calcular el valor máximo de la función. Aquí está mi código:
const [lazyProgress,setLazyProgress] = useState(0); const [lazyProgressMax,setLazyProgressMax] = useState(0); function lazyProgressUpdate(){ const scrollTotal = document.documentElement.scrollTop; const heightWin = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scroll = scrollTotal / heightWin * 100; setLazyProgress(scroll); if(lazyProgress > lazyProgressMax){ setLazyProgressMax(lazyProgress); } console.log(lazyProgress,lazyProgressMax) } useEffect(()=>{ const timer = setInterval(()=>{ lazyProgressUpdate(); },8000); return ()=>{ clearInterval(timer); } },[]);En el fragmento anterior, lazyProgress y lazyProgressMax siempre son 0 en la función. Entonces ninguno de ellos se actualiza.
¿Cómo supero este problema?
El problema que tiene es en realidad un recinto de estado obsoleto en la devolución de llamada setInterval. Esta devolución de llamada se cierra sobre el estado inicial, por lo que eso es todo lo que verá.
Ponga en cola las actualizaciones de desplazamiento y use un gancho useEffect separado con una dependencia en lazyProgress para verificar/establecer el estado lazyProgressMax .
const [lazyProgress, setLazyProgress] = useState(0); const [lazyProgressMax, setLazyProgressMax] = useState(0); function lazyProgressUpdate(){ const scrollTotal = document.documentElement.scrollTop; const heightWin = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scroll = scrollTotal / heightWin * 100; setLazyProgress(scroll); // <-- (1) update lazyProgress state } useEffect(() => { const timer = setInterval(() => { lazyProgressUpdate(); }, 8000); return () => { clearInterval(timer); } },[]); useEffect(() => { setLazyProgressMax(lazyProgressMax => { // <-- (3) functional state update if (lazyProgress > lazyProgressMax) { return lazyProgress; // <-- (4a) return new lazyProgress value } return lazyProgressMax; // <-- (4b) or previous state }); }, [lazyProgress]); // <-- (2) lazyProgress as dependencyDebe crear una función dentro de useEffect en caso de que no se necesite más la función.
El siguiente código es una guía sobre cómo crear la función dentro de useEffect y cómo borrar el intervalo creado.
useEffect(()=>{ const lazyProgressUpdate = () => { // function logic here } const timer = setInterval(() => { lazyProgressUpdate() }, 8000); return () => { clearInterval(timer); } },[]);