為什么我在 getInitialProps 中使用 params 在 Next.js 中構建時它們是未定義的

Question

我在 Next.js 中有這個問題。 我在getInitialProps調用 API 並將params傳遞給我的組件，然后當我在 mu 項目中使用它時它可以工作。 但是當我想構建它時，它給我的錯誤是params是undefined 。

這就是我調用 API 並將其傳遞給組件的方式：

import BlogItem from './blogItem'
import axios from 'axios'
import { withRouter } from 'next/router'
import { APIURL, replaceAll } from '../../../components/config'
const Post = (props) => {
  return (

    <BlogItem
      services ={props.services }

    />

  )
}

Post.getInitialProps = async ({ query }) => {
  const id = query.id
  const urlTitle = encodeURI(query.title)
  const services  = null;

  try {
    const response = await axios.get(`${APIURL}getservice`);
    services = response.data.response.posts;
  } catch (err) {
    console.error(err)
  }

  return {
services 
  }
}

export default withRouter(Post)

Answer 1

您似乎將服務定義為包含null的const ！ 整個代碼看起來不錯。 嘗試更改 const 以讓：

Post.getInitialProps = async ({ query }) => {
  const id = query.id
  const urlTitle = encodeURI(query.title)
  let services  = null; //this line

  try {
    const response = await axios.get(`${APIURL}getservice`);
    services = response.data.response.posts;
  } catch (err) {
    console.error(err)
  }

  console.log(services) //you should have the data right here

  return {services}
}

例子：看看這個例子。 運行它並導航到/about頁面：

Answer 2

您需要確保將您的 url 參數傳遞到服務器上的查詢字符串中，在您的情況下，如下所示：

server.get('/page/:uid/:id', (req, res) => {
  const mergedQuery = Object.assign({}, req.query, req.params)
  return app.render(req, res, '/page', mergedQuery);
})

然后您的 getInitialProps 可以直接從查詢中獲取它們，而不管它在哪里加載。