Next.js React组件getInitialProps不绑定属性
Next.js React组件getInitialProps不绑定属性
提问于 2016-11-30 21:33:16
在Next.js中，您可以在React组件中使用绑定到服务器端在第一次加载时呈现的生命周期方法。
我尝试使用the ZEIT tutorial中提供的这个函数(或者使用on their Github)，但是this.props似乎没有得到该函数返回的JSON。当我单击组件时，console打印一个空对象。
import React from 'react'
import 'isomorphic-fetch'
export default class extends React.Component {
static async getInitialProps () {
const res = await fetch('https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json')
const data = await res.json()
return { data }
}
print() {
console.log(this.props);
}
render() {
return <div onClick={this.print.bind(this)}>print props</div>
}
}回答 3
Stack Overflow用户
发布于 2018-07-03 06:06:51
我有这个问题是由于我的_app.js (即NextJS Custom App)中的一个问题，这是我在添加Redux时引起的(不是Redux问题)。当我开始在页面中使用getInitialProps时，我的道具在呈现时是空的，尽管静态调用中有数据。原因是我的_app.js中的pageProps传播不正确。
因此，在我的案例中，修复正在更改，在自定义_app.js getInitialProps中，如下所示：
return {
...pageProps,
initialReduxState: reduxStore.getState()
}至：
return {
pageProps: {...pageProps},
initialReduxState: reduxStore.getState()
}。。因此，在NextJS文档链接中看到的render方法可以将它们连接起来。
Stack Overflow用户
发布于 2017-01-17 03:07:24
您可以像这样在getInitialProps方法中进行调用，只需对代码稍作修改即可
import React from 'react'
import 'isomorphic-fetch'
export default class extends React.Component {
static async getInitialProps () {
const res = await fetch('https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json')
const data = await res.json()
return { jsonData: data }
}
print() {
console.log(this.props.jsonData);
}
render() {
return <div onClick={()=> this.print()}>print props</div>
}
}Stack Overflow用户
发布于 2016-12-30 15:41:26
我试过你的代码，它似乎工作得很好，控制台显示this.props
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40889738
复制相关文章
相似问题
腾讯云开发者
