Estoy tratando de implementar cargar más funciones en mi aplicación de reacción. Y para eso estoy creando un punto final para implementar cargar más. Por lo tanto, cada vez que se carga la aplicación, obtiene los 5 datos iniciales, pero no puede obtener los siguientes 5 datos después de hacer clic en el botón Cargar más desde la interfaz de usuario.

Aquí está el controlador para eso

 export const loadMoreBlogs = async (req, res) => { const { skip } = req.body; try { const limit = 5; const blogs = await BlogModel.find().skip(skip).limit(limit); res.status(200).json(blogs); } catch (error) { res.status(404).json({ message: error.message }); } };

Reaccionar componente

 import React, { useState, useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; import { loadMoreBlogs, setLoadedBlogs } from "../redux/features/blogSlice"; const Blogs = () => { const [skip, setSkip] = useState(0); const dispatch = useDispatch(); const limit = 5; const { loadBlogs } = useSelector((state) => ({ ...state.blog })); useEffect(() => { dispatch(loadMoreBlogs(skip)); }, [skip]); console.log("skip", skip); const handleLoadMore = () => { const skipTo = skip + limit; dispatch(loadMoreBlogs(skipTo)); setSkip(skipTo); setLoadedBlogs(loadBlogs); }; return ( <> {loadBlogs?.map((item) => ( <h2>{item.title}</h2> ))} <button onClick={handleLoadMore}>Load More</button> </> ); }; export default Blogs;