Intento completar una tabla con una llamada API en NextJS. Uso la función getStaticProps para obtener los datos y pasarlos al componente. Probé la función map() para acceder a cada dato en el objeto pero no funciona y no completa los datos requeridos. cuando ejecuto la aplicación, la consola muestra el siguiente error.
Warning: data for page "/" is 150 kB, this amount of data can reduce performance. Cuando revisé la fuente de la página, tiene el objeto API completo y no entiendo por qué lo hace. Abajo he puesto el código de index.js y CountriesTable.js
índice.js
import Head from "next/head"; import CountriesTable from "../components/CountriesTable/CountriesTable"; import Layout from "../components/Layouts/layout"; import SearchInput from "../components/SearchInput/SearchInput"; import styles from "../styles/Home.module.css"; export default function HomePage({ countries }) { return ( <Layout> <div className={styles.counts}>found {countries.length} countries</div> <SearchInput placeholder="Search for country" /> <CountriesTable countries={countries} /> </Layout> ); } export const getStaticProps = async () => { const res = await fetch("https://restcountries.com/v3.1/region/asia"); const countries = await res.json(); return { props: { countries, }, }; };CountriesTable.js
import styles from './CountriesTable.module.css'; export default function CountriesTable({countries}) { return ( <div> <div className={styles.heading}> <button className={styles.heading_name}> <div>Name</div> </button> <button className={styles.heading_population}> <div>Population</div> </button> </div> {countries.map((country) => { <div className={styles.row}> <div className={styles.name}>{country.name}</div> <div className={styles.population}>{country.population}</div> </div> })} </div> ); };¿Cómo puedo resolver el error en la consola y completar la tabla con datos? ¡TIA!
NextJS es una plataforma renderizada por servidor. Cualquier accesorio que pase a las páginas/componentes se serialized en la fuente misma. Por lo tanto, es muy importante trim data a los campos que sean necesarios. De lo contrario, verá json completo en la fuente HTML. (Códigos de trabajo y caja )
Reduzca la cantidad de datos devueltos por getStaticProps, getServerSideProps o getInitialProps a solo los datos esenciales para representar la página.
Como solo se requiere el name y la population , podemos crear un nuevo conjunto de datos solo con estas dos propiedades. Esto también debería eliminar la advertencia.
export const getStaticProps = async () => { const res = await fetch("https://restcountries.com/v3.1/region/asia"); const countries = await res.json(); const countriesWithNamePopulation = countries.map((country) => ({ name: country.name.common, population: country.population })); return { props: { countries: countriesWithNamePopulation } }; }; countries.map necesita una declaración de devolución
{countries.map((country) => { return ( <div> <div>{country.name}</div> <div>{country.population}</div> </div> ); })}No puedo reproducir la advertencia de su consola, pero le falta la declaración de devolución dentro de su función de mapa.
Esto funciona para mí:
{countries.map((country, index) => { return( <div key={index}> <div>{country.name.common}</div> <div>{country.population}</div> </div> ) })}Además, no necesita mostrar country.name ya que es un objeto. Usé country.name.common que es válido ya que es una cadena. Además, debe agregar una propiedad clave a su div dentro de la función de mapa.