Nota: Soy muy nuevo cuando se trata de renderizar API.

Recientemente, me asignaron tarea para llamar y representar datos de API desde cualquier API de nuestra elección. Elegí la API Swapi Star Wars por su gran popularidad. Después de elegir la API de mi elección, se me asignó llamar y mostrar los 60 planetas dentro de la API de Star Wars. Después de luchar con la API durante los últimos dos días, mis llamadas a la API solo mostraban 10 conjuntos de datos. Seguí tratando de utilizar los ganchos useEffect y useCallback para fines de limpieza junto con el uso de diferentes condiciones para configurar y terminar un bucle para obtener todos los conjuntos de datos, pero fue en vano, no pude obtener el resto de los datos a renderizar. Después de utilizar Postman para mostrar los datos de la llamada API, parece que no puedo encontrar una solución definitiva para mostrar los 60 planetas dentro de la API Swapi Star Wars. Sería muy apreciado si alguien me puede ayudar. Salud.

Aquí está mi código:

 import React, {useEffect, useState} from 'react'; function App() { const [planets, setPlanets] = useState([]); const [url, setURL] = useState(`https://swapi.dev/api/planets/`); useEffect(() => { async function fetchPlanets(){ let res = await fetch(url); let data = await res.json(); do{ setPlanets(data.results); setURL(data.next); } while(data.next !== null) } fetchPlanets(); },[planets, url]); return ( <div className="App"> {planets && planets.map((planet,i) => { return( <h1 key={i}> {planet.name} </h1> ); })} </div> ); } export default App;