Next.js，getStaticProps不適用于組件，但適用于頁面

如果我在本地主機上訪問此代碼，它能夠從 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：無法讀取未定義的屬性（讀取“資料”）

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

我認為我收到此錯誤的原因是因為獲取資料的方式。也許它沒有包含在組件中。

uj5u.com熱心網友回復：

getStaticProps僅適用于pages檔案夾內的頁面。資料是在構建時獲取的。如果你想UserTransactionsComponent用作普通組件，你應該使用useEffect并在 mount 時呼叫 api。

這是 Next.js 的檔案所說的：

如果您從頁面匯出名為 getStaticProps（靜態站點生成）的函式，Next.js 將使用 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;

標籤：反应 下一个

上一篇：將影像上傳到FastAPI不可處理物體

下一篇：狀態變化的轉換React