0
249
Vistas¿Cómo desplazarse hacia la vista solo en el renderizado inicial?
Estoy luchando para desplazar el nodo a la vista solo en el renderizado inicial. Esto es lo que estoy tratando de hacer.
const [lastItemRef, setLastItemRef] = useState(null); const [isScrolled, setIsScrolled] = useState(false); useEffect(() => { if (lastItemRef !== null && !isScrolled) { lastItemRef.scrollIntoView({ block: 'end', inline: 'center', }); setIsScrolled(true); } }, [lastItemRef, isScrolled]); [![return ( <SomeList> <DeepItem ref={lastItemRef} /> </SomeList> )][1]][1] 
** Verifique las pantallas ** DeepItem se menciona en la pantalla y necesito desplazarme a su vista solo una vez en el renderizado inicial. Lo extraño es que cuando setIsScrolled(true); scrollIntoView funciona, pero también funciona en renderizaciones subsiguientes cuando intento desplazar la lista hacia arriba y hacia abajo o hacia la izquierda y hacia la derecha. Como puedo imaginar de alguna manera, la interacción DOM no está sucediendo porque está esperando que la reacción actualice el estado interno y una vez que sucede, isScrolled ya es false . En la segunda pantalla puede ver el resultado sin eliminar setIsScrolled(true) .
FYI: estoy usando la tabla MUI con react-window FixedSizeList .
1 Respuestas
Responde la pregunta0
No es necesario que el estado isScrolled para manejar ese caso. En lugar de eso, puede llamar a useEffect con [] (sin dependencias) que activará su lógica solo una vez después de la primera representación.
useEffect(() => { if (lastItemRef !== null) { lastItemRef.scrollIntoView({ block: 'end', inline: 'center', }); } }, []); Si lastItemRef es nulo inicialmente, puede agregarlo a la lista de dependencias. Siempre se refiere al mismo objeto, por lo que useEffect también se activa una vez después de lastItemRef tenga un valor.
useEffect(() => { if (lastItemRef !== null) { lastItemRef.scrollIntoView({ block: 'end', inline: 'center', }); } }, [lastItemRef]);