If I visit this code on local host, it is able to pull data from the API and then display it on a card.

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;

When I create a component and then call it in to my index page like so:

    <PageLayout>
      <Banner modalType={MODAL_TYPES.CLAIM} />
      <ExploreCard />
      <HomepageStatistics />
      <Title>New &amp; Noteworthy</Title>
      <UserTransactionsComponent />

      <Grid items={featuredTemplates} />
    </PageLayout>
  );
};

export default MarketPlace;

it gives me the following error

TypeError: Cannot read properties of undefined (reading 'data')

  27 | <ul>
> 28 |   {results.data.map((result) => {
     |           ^
  29 |     const {
  30 |       sale_id,
  31 |       buyer,

I think that the reason I'm getting this error is because of the way the data is being fetched. Perhaps it's not being included in the component.

CodePudding user response：

getStaticProps works only for pages inside pages folder. The data is fetched at build time. If you wanna use UserTransactionsComponent as a normal component, you should use useEffect and make the api call on mount.

Here is what the Next.js's documentation says:

If you export a function called getStaticProps (Static Site Generation) from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.

UserTransactionsComponent as a normal component:

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;