Soy un principiante en REACT y estoy tratando de descubrir cómo implementar la paginación en mi proyecto React usando axios. La api que estoy usando (swapi.dev) tiene un total de 87 caracteres, cuando envía una solicitud GET con https://swapi.dev/api/people , solo obtiene 10 caracteres por página, pero puede usar el enlace en cartero, que dice "siguiente" para cambiar entre cada página de caracteres. Estoy tratando de hacer una solicitud con axios para paginar cada lista de 10. Pensé que sería bueno usar un bucle for, pero no estoy seguro.
import React, { useEffect, useState } from "react"; import axios from "axios"; import _ from "lodash"; import ReactPaginate from "react-paginate"; import Table from "react-bootstrap/Table"; export default function Posts() { const [characterData, setCharacterData] = useState([]); //use a for loop to loop through all sites useEffect(() => { axios .get("https://swapi.dev/api/people/") .then((res) => { console.log(res.data.next); setCharacterData(res.data.results); }) .catch((err) => { console.log(err); }); }, []); // for ( i = 0; i < data.results.length, i++) { // names = names + data.results[i].name // } // function handleclick(e) => { // } return ( <> <Table stripped bordered hover className="project--table"> <thead> <tr> <th>Name</th> <th>Birth Year</th> <th>Height</th> <th>Mass</th> <th>Homeworld</th> <th>Species</th> </tr> </thead> <tbody> {characterData.map((character, index) => { return ( <tr key={index}> <td>{character.name}</td> <td>{character.birth_year}</td> <td>{character.height}</td> <td>{character.mass}</td> <td>{character.homeworld}</td> <td>{character.species}</td> </tr> ); })} </tbody> </Table> {/* <button onClick={}>Next</button> */} </> );Revisé su API y la siguiente clave tiene un valor que contiene la URL de la página siguiente. No es necesario un ciclo, simplemente puede verificar si existe la siguiente clave y, dependiendo de eso, puede enviar una solicitud. puede crear un nuevo estado que contendrá el siguiente uri y en la función onClick verifica si hay la tecla "siguiente". es algo como esto:
const [next,setNext]= useState("");en el useEffect que escribiste puedes agregar:
axios .get("https://swapi.dev/api/people/") .then((res) => { console.log(res.data.next); setCharacterData(res.data.results); if (res.data.next) setNext(res.data.next); })y finalmente en la función onClick:
if(next) { axios.get(next).then(res=> setCharacterData(res.data.results)) }Creo que hay una mejor solución para esto, pero puedes trabajar con este cajero automático.