Estoy tratando de agregar paginación en React y estoy enviando una consulta, según el número de página de la URL. Los datos deben obtenerse y actualizarse en el mismo componente.

Pero el problema ocurre cuando paso de la página 2 a la página 3. Los datos de la página 2 y de la página 3 se muestran alternativamente durante un tiempo.

Después de un tiempo, los datos recién obtenidos se actualizan. Tengo setPost([]) después de hacer clic en la página 3, pero no sé de dónde viene la página 2.

Quiero establecer Cargar en verdadero hasta que los datos recién obtenidos se obtengan por completo.

 const Daily = ({match}) => { const [posts, setPosts] = useState([]); const [numberOfPages, setNumberOfPages] = useState([]); const [loading, setLoading] = useState(true); const perPageItems = 8; useEffect(() => { const totalPost = () => { getPostsCount() .then(data => { setNumberOfPages(Math.ceil(data/perPageItems)) }) } const loadIndexPosts = (a, b) => { getPostsByIndex(a, b) .then(data => { if (data.error) { console.log(data.error); } else { setPosts(data); } setLoading(false); }) }; totalPost() if(match.params.page==undefined) match.params.page=1; var n = parseInt(match.params.page)-1; var startIdx = n*perPageItems; loadIndexPosts(startIdx, perPageItems) },) console.log(posts); return ( <div> <div className="mt-5 daily-card-feed"> {loading && <ThreeDotsWave/>} {posts.map((post, index) => { return ( <div key={index}> <DailyCard post={post}/> </div> ) })} </div> <div className="h4 pb-5 pull-right mr-5"> {match.params.page==1 && <Link to={`/daily/page/2`} onClick={() => {setLoading(true); setPosts([])}}>Older Post -></Link>} {match.params.page!=1 && <Link to={`${parseInt(match.params.page)+1}`} onClick={() => {setLoading(true); setPosts([])}}>Older Post -></Link>} </div> </div> ) }