Question

我是React和Next.js的新手，所以请多多包涵。但是我花了三个小时进行搜索，因此无法终生弄清自己在这里做错了什么。

this.props.test不会输出任何内容，即使看起来应该输出'test'。

就像getInitialProps从未被调用过。

class Example extends React.Component {

  static async getInitialProps() {
    return {
      test: 'test'
    }
  }

  render() {
    return (
      <h1>Hi {this.props.test}</h1>
    )
 } 

}

Answer 1

由于getInitialProps仅适用于Next.js中的Pages，因此子组件的正确方法是使用componentDidMount而不是setState的{{1}}。

Answer 2

我来到这里时遇到了同样的问题，而我的组件是在/pages中，所以其他答案并没有真正帮助。

我的问题是我使用的是自定义应用（/pages/_app.js），并且其中包含getInitialProps。

在文档中有点模糊，但是在custom app example中确实提到了（强调我的意思）：

仅取消注释[getInitialProps]，如果您对应用程序中的每个页面都具有阻止数据的要求。 这将禁用执行自动静态优化的功能，从而导致应用中的每个页面都在服务器端呈现。

这实际上意味着，如果您的自定义_app.js具有getInitialProps方法，您将告诉Next.js这是唯一的阻止数据，并且可以假定所有其他页面组件都没有或没有。需要自己的getInitialProps。如果您仍然有一个，它将被忽略，这就是我的问题所在。

这是通过针对自定义应用从getInitialProps内部调用页面组件上的getInitialProps来解决的。

// pages/_app.js
const App = ({Component, pageProps }) => (
  <React.Fragment>
    <AppHeader />
    <Component {...pageProps />
  </React.Fragment>
)

App.getInitialProps = async ({Component, ctx}) => {
  let pageProps = {}
  if(Component.getInitialProps){
    pageProps = await Component.getInitialProps(ctx)
  }
  return { pageProps }
}

// pages/home.js
const Home = ({name}) => <div>Hello world, meet {name}!</div>

Home.getInitialProps = async () => {
  return { name: 'Charlie' }
}

export default Home

我不确定为什么您不能直接返回pageProps（什么都没传），但这似乎很特别，现在对我有用。.

Answer 3

如果是这样，只需删除 pages/_app.js 文件。

发生这种情况是因为 _app.js 覆盖了 NextJS 的默认值。

如果您仍想将 getInitialProps 与 _app.js 一起使用，您必须在 _app.js 中声明这个函数：

_app.js 内部：

export default class MyApp extends App {
 static async getInitialProps(appContext){

  // your logic goes here

  return {}
 }
 
 render(){
  const {Component} = this.props;

  return (
   <Layout>
    <Component />
   </Layout>
  )
 }
}

getInitialProps永远不会被调用...我在做什么错？

3 个答案: