为什么我在getInitialProps中使用参数它们在Next.js中构建时是未定义的
为什么我在getInitialProps中使用参数它们在Next.js中构建时是未定义的
提问于 2019-12-13 09:58:12
我在Next.js中遇到了这个问题。我在getInitialProps中调用API，并将params传递给我的组件，然后当我在mu项目中使用它时，它就可以工作了。但是当我想构建的时候，它给我的错误是params是undefined。
下面是我调用API并将其传递给component的方式：
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)回答 2
Stack Overflow用户
发布于 2019-12-14 10:32:44
您似乎将服务定义为包含null的const！整个代码看起来都很好。尝试将const更改为let：
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页面：
Stack Overflow用户
发布于 2021-05-02 08:26:27
您需要确保您的url参数被传递到服务器上的querystring中，在您的示例中，如下所示：
server.get('/page/:uid/:id', (req, res) => {
const mergedQuery = Object.assign({}, req.query, req.params)
return app.render(req, res, '/page', mergedQuery);
})这样，您的getInitialProps就可以直接从查询中获取它们，而不管它加载到哪里。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59320081
复制相关文章
相似问题
getInitialProps在Next.js中是什么
getInitialProps在Next.js中的条件执行
getInitialProps在Next.js与TypeScript中的应用
在Next.js中重定向getInitialProps时出现无限循环
next.js - getInitialProps在组件中不起作用
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
