Estoy creando una página web de blog y la API que estoy usando para crearla ya está paginada, por lo que devuelve 10 objetos en cada solicitud que hago. Pero el cliente quiere que la página tenga un botón "cargar más", cada vez que el usuario haga clic en él, mantendrá los datos ya cargados y cargará más 10 objetos. Hasta ahora, he hecho que el botón llame a más de 10 objetos nuevos, cada vez que hago clic en él, pero también necesito conservar los datos ya cargados.
Este es mi archivo hasta ahora: MainPage.js
import React, { useState, useEffect} from 'react'; const MainPage = () => { const [blogs, setBlogs] = useState(''); const [count, setCount] = useState(1); useEffect(() => { fetch("https://blog.apiki.com/wp-json/wp/v2/posts?_embed&categories=518&page="+count) .then((response) => response.json()) .then((json) => { console.log(json) setBlogs(json) }) }, [count]) const clickHandler = () => { console.log(count); return setCount( count+1) } return ( <div> <p>All the recent posts</p> { blogs && blogs.map((blog) => { return ( <div key={blog.id}> <img width="100px" src={blog._embedded["wp:featuredmedia"][0].source_url}/> <p>{blog.title["rendered"]}</p> </div> ) }) } <button onClick={clickHandler}>LoadMore</button> </div> ) } export default MainPage;La idea es bastante simple. Simplemente concatene matrices utilizando la sintaxis de propagación de la siguiente manera.
var first =[1, 2, 3]; var second = [2, 3, 4, 5]; var third = [...first, ...second];Entonces, haga esto cuando esté haciendo clic en el botón cargar más.
Aquí se me ocurrió manejar todo el asunto:
En primer lugar, llamaré a una función dentro del useEffect para cargar algunas publicaciones de blog inicialmente. En segundo lugar, he declarado un estado adicional para mostrar Loading y Load More texto en el botón.
Aquí está el fragmento de código completo:
import React, { useState, useEffect } from "react"; const MainPage = () => { const [loading, setLoading] = useState(false); const [blogs, setBlogs] = useState([]); const [count, setCount] = useState(1); useEffect(() => { const getBlogList = () => { setLoading(true); fetch( "https://blog.apiki.com/wp-json/wp/v2/posts?_embed&categories=518&page=" + count ) .then((response) => response.json()) .then((json) => { setBlogs([...blogs, ...json]); setLoading(false); }); }; getBlogList(); }, [count]); return ( <div> <p>All the recent posts</p> {blogs && blogs.map((blog) => { return ( <div key={blog.id}> <img width="100px" src={blog._embedded["wp:featuredmedia"][0].source_url} /> <p>{blog.title["rendered"]}</p> </div> ); })} { <button onClick={() => setCount(count + 1)}> {loading ? "Loading..." : "Load More"} </button> } </div> ); }; export default MainPage;Según la documentación de React:
Si el nuevo estado se calcula utilizando el estado anterior, puede pasar una función a
setState.
Por lo tanto, podría agregar publicaciones de blog recién cargadas a las existentes en useEffect de esta manera:
setBlogs((prevBlogs) => [...prevBlogs, ...json])También establecería el estado inicial en una matriz vacía en lugar de una cadena vacía para mantener la coherencia:
const [blogs, setBlogs] = useState([]);