nextjsgetStaticProps在我的組件中不起作用

我有以下組件，然后我將其匯入并在頁面中使用。不幸的是，我收到了錯誤error - TypeError: Cannot read property 'labels' of undefined，data并且options在我將它們傳遞給 ChartCard 的行中帶有下劃線。我試圖盡可能地關注檔案，但我想我一定是做錯了什么。

import faker from '@faker-js/faker'
import {
  CategoryScale,
  Chart as ChartJS,
  Legend,
  LinearScale,
  LineElement,
  PointElement,
  Title,
  Tooltip,
} from 'chart.js'
import { Line } from 'react-chartjs-2'
import BaseCard from './BaseCard'

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
)
export async function getStaticProps() {
  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top' as const,
      },
      title: {
        display: true,
        text: 'Price',
      },
    },
  }
  const labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
  ]
  const data = {
    labels,
    datasets: [
      {
        label: 'Dataset 1',
        data: labels.map(() => faker.datatype.number({ min: 2000, max: 4000 })),
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
      },
    ],
  }

  return {
    props: { options, data },
  }
}


export default function ChartCard({ options, data }) {
  return (
    <BaseCard>
      <Line options={options} data={data} />
    </BaseCard>
  )
}

編輯：我現在重構了我的代碼，在 index.js 頁面中有 getStaticProps，如下所示：

#index.tsx
import type { NextPage } from 'next'
import faker from '@faker-js/faker'
import ChartCard from '../components/ChartCard'

export async function getStaticProps() {
  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top' as const,
      },
      title: {
        display: true,
        text: 'IndexCoin Price',
      },
    },
  }
  const labels = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
  ]
  const data = {
    labels,
    datasets: [
      {
        label: 'Dataset 1',
        data: labels.map(() => faker.datatype.number({ min: 2000, max: 4000 })),
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
      },
    ],
  }

  return {
    props: { options, data },
  }
}

const Home: NextPage = (options, data) => {
  console.log(options)
  console.log(data)
  console.log(data.datasets)
  return(
    <ChartCard options={options} data={data} />
  )
}

這個的控制臺輸出是：

options: { responsive: true, plugins: { legend: [Object], title: [Object] } },
  data: {
    labels: [
      'January', 'February',
      'March',   'April',
      'May',     'June',
      'July'
    ],
    datasets: [ [Object] ]
  }
}
{}
undefined

這會崩潰，因為資料集是未定義的。為什么會這樣？

uj5u.com熱心網友回復：

只能getStaticProps在 NextJS 頁面中使用（即 src/pages/MyPageComponent.js 下的組件）。

（https://nextjs.org/docs/basic-features/data-fetching/get-static-props）

這意味著使用 options=undefined 和 data=undefined 呼叫您的 ChartCard，因為它getStaticProps永遠不會運行。

能夠將服務器端資料獲取和渲染封裝在一個組件檔案中當然會很好，但不幸的是，目前還不可能。

您需要做的是向 eg 添加一個 apisrc/api/MyApi.js并在您的組件中呼叫它。

例如，從以下開始的快速示例：

src/api/MyApi.js

export default function MyApi(req, res) {
  //... do your data fetching
  res.send({options, data})
}

src/components/MyComponent.js

const [result, setResult] = useState();
useEffect(async ()=>{
  const res = await fetch('/api/MyApi');
  const result = await res.json();
  setResult(result);
}, []);

const {options, data} = result ?? {};

請注意，上面將執行客戶端資料獲取，因此需要一個實時服務器。

如果您希望在構建時構建靜態頁面，那么您唯一的選擇 (IIRC) 是捕獲 src/pages/MyPage.js 的 getStaticProps 中所需的所有資料，并根據需要將它們傳遞到頁面的組件中。

uj5u.com熱心網友回復：

如果此代碼是您專案的精確副本，則其中有一個錯字：

position: 'top' as const

試試這個：

position: 'top as const'

也getStaticProps用于頁面組件

標籤：javascript 反应 打字稿 下一个.js

上一篇：在Next.js的API中，沒有為send()\json()提供“body”的引數，使用TypeScript

下一篇：props.src的正確型別是什么？（打字稿）