Javascript 为什么在getInitialProps中使用参数在Next.js中构建时未定义参数

我在Next.js中遇到了这个问题。我在

getInitialProps

中调用API，并将

params

传递给我的组件，然后当我在mu项目中使用它时，它就会工作。但是当我想要构建时，它会给我一个错误，

params

是

未定义的

以下是我调用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)

从“./BlogItem”导入BlogItem
从“axios”导入axios
从“下一个/路由器”导入{withRouter}
从“../../../components/config”导入{APIRL，replaceAll}
const Post=（道具）=>{
返回(
)
}
Post.getInitialProps=异步（{query}）=>{
const id=query.id
const urlTitle=encodeURI（query.title）
const services=null；
试一试{
const response=await axios.get（`${apirl}getservice`）；
服务=response.data.response.posts；
}捕捉（错误）{
控制台错误（err）
}
返回{
服务
}
}
使用路由器导出默认值（Post）

您似乎将服务定义为包含

null

的

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

页面：

---

您需要确保您的url参数已传递到服务器上的查询字符串中，在您的情况下，如下所示：

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

---

然后您的getInitialProps可以直接从查询中获取它们，而不管它加载到哪里。

这一行出现的错误==>Post.getInitialProps=async（{query}）=>{？？？在npm运行开发中没有任何问题，但是当我使用npm运行构建时，我遇到了如下错误：错误发生在预呈现页面“/blog/[title]/blogItem”：TypeError:无法读取undefinedOk的属性'split'，我猜

服务

没有通过getinitialprops正确返回。是否打印服务并确保其具有正确的值？是的，我打印了它，我有值，并在我的项目中使用它，但我不知道为什么生成它时会给出undefined错误：(（我遇到了同样的问题，不是在构建过程中，而是导致了一个内部服务器错误。是否有更新？我在控制台日志中得到了服务，但我在运行开发中得到了服务，但在构建过程中我没有得到，我必须使用componentDidmount来设置状态，但我不想使用它。尽管您有async Wait，也许您应该在try范围内返回服务。试试{const response=wait axios.get（

${apirl}getservice

）；services=response.data.response.posts；if（services）{return{services}}}@ElyasPourmotazedy我用自己的代码为您上传了一个示例。请查看