javascript - Next.js，getStaticProps 不与组件一起工作，但与页面一起工作

Question

如果我在本地主机上访问这段代码，它能够从 API 中提取数据，然后将其显示在卡片上。

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;

当我创建一个组件然后将它调用到我的索引页面时:

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

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

export default MarketPlace;

它给我以下错误

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

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

我认为我收到此错误的原因是数据的获取方式。也许它没有被包含在组件中。

Answer 1

getStaticProps 仅适用于 pages 文件夹内的页面组件。并且数据是在构建时获取的。如果您想将 UserTransactionsComponent 用作普通组件，您应该使用 useEffect 并在挂载时调用 API。

这是 Next.js 的 documentation说到 getStaticProps:

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:

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;