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;

它给了我以下错误

类型错误：无法读取未定义的属性（读取“数据”）

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

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

Answer 1

getServerSideProps和等方法getStaticProps仅适用于文件夹内的页面组件pages。更具体地说，它们仅在定义 paths 的文件内工作。

例如，以下是文档的内容：getStaticProps

getStaticProps只能从页面导出。您无法从非页面文件、_app、_document或中导出它_error。

如果你想UserTransactionsComponent作为普通组件使用，你应该useEffect在挂载时使用并进行 API 调用：

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;