Si visito este código en el host local, puede extraer datos de la API y luego mostrarlos en una tarjeta.
import { formatNumber, parseTimestampJM } from '../../utils'; import { Card } from './UserTransactions.styled'; // STEP 1 : fetch data from api export async function getStaticProps() { const res = await fetch( 'https://proton.api.atomicassets.io/atomicmarket/v1/sales' ); const data = await res.json(); return { props: { data, }, }; } function UserTransactionsComponent({ data }) { const results = data; console.log(results); return ( <PageLayout> <div> <h1>This is a list of User Transactions!</h1> </div> <ul> {results.data.map((result) => { const { sale_id, buyer, seller, listing_price, listing_symbol, created_at_time, } = result; if (buyer !== null) { return ( <Card> <li key={sale_id}> <h3> {seller} just sold item number {sale_id} to {buyer} for{' '} {formatNumber(listing_price)} {listing_symbol} at{' '} {parseTimestampJM(created_at_time)} </h3> </li> </Card> ); } })} </ul> </PageLayout> ); } export default UserTransactionsComponent;Cuando creo un componente y luego lo llamo a mi página de índice así:
<PageLayout> <Banner modalType={MODAL_TYPES.CLAIM} /> <ExploreCard /> <HomepageStatistics /> <Title>New & Noteworthy</Title> <UserTransactionsComponent /> <Grid items={featuredTemplates} /> </PageLayout> ); }; export default MarketPlace;me da el siguiente error
TypeError: no se pueden leer las propiedades de undefined (leyendo 'datos')
27 | <ul> > 28 | {results.data.map((result) => { | ^ 29 | const { 30 | sale_id, 31 | buyer,Creo que la razón por la que recibo este error es por la forma en que se obtienen los datos. Tal vez no esté incluido en el componente.
getStaticProps funciona solo para páginas dentro de la carpeta de pages . Los datos se obtienen en el momento de la compilación. Si desea usar UserTransactionsComponent como un componente normal, debe usar useEffect y hacer la llamada api en el montaje.
Esto es lo que dice la documentación de Next.js:
Si exporta una función llamada getStaticProps (Generación de sitios estáticos) desde una página, Next.js renderizará previamente esta página en el momento de la compilación utilizando los accesorios devueltos por getStaticProps.
Aquí está UserTransactionsComponent como un componente normal:
import {useState, useEffect} from "react" function UserTransactionsComponent() { const [data, setData]=useState(); useEffect(()=>{ async function fetchData() { const res = await fetch( 'https://proton.api.atomicassets.io/atomicmarket/v1/sales' ); const {data} = await res.json(); setData(data) } fetchData() },[]); if(!data){ return (<div>Loading...</div>) } return ( <PageLayout> <div> <h1>This is a list of User Transactions!</h1> </div> <ul> {data.map((result) => { const { sale_id, buyer, seller, listing_price, listing_symbol, created_at_time, } = result; if (buyer !== null) { return ( <Card> <li key={sale_id}> <h3> {seller} just sold item number {sale_id} to {buyer} for{' '} {formatNumber(listing_price)} {listing_symbol} at{' '} {parseTimestampJM(created_at_time)} </h3> </li> </Card> ); } })} </ul> </PageLayout> ); } export default UserTransactionsComponent;