Estoy tratando de crear un desplazamiento infinito con el observador de intersección, pero la función de devolución de llamada no actualiza el estado. Cuando me desplazo hacia abajo, puedo ver la salida de console.log de los estados, pero siempre es la misma.
import React, { useEffect, useState, useRef } from 'react'; // Css import './index.css'; // Components import QuadColors from './colors-components/quad-colors'; import SearchBar from '../../components/searchBar'; export default function colors() { const [renderColorSets, setRenderColorSets] = useState(5); const containerRef = useRef(); const footRef = useRef(); // Intersection Observer useEffect(() => { const observer = new IntersectionObserver((entries) => { if (entries[0].isIntersecting) { setRenderColorSets(renderColorSets + 1); console.log(renderColorSets); } }); observer.observe(footRef.current); }, []); return ( <> <SearchBar placeholder="Color" /> <div className="random-colors-container" ref={containerRef}> {[...Array(renderColorSets)].map(() => { return <QuadColors />; })} <div ref={footRef} /> </div> </> ); }```Debe proporcionar una función de actualización a setState, no un valor actualizado en sí mismo (causa del valor encerrado dentro de la función de devolución de llamada del observador). Intenta hacer lo siguiente:
if (entries[0].isIntersecting) { setRenderColorSets((prevColorSets) => prevColorSets + 1); console.log(renderColorSets); }Por lo tanto, cada vez que activa la función setState, tiene el último valor de estado.