reactjs - getInitialProps永远不会被调用……我在做什么错？

我是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>
    )
 }

}

最佳答案

我来到这里时遇到了同样的问题，我的组件在/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（什么都没有通过），但这似乎有些特殊，并且现在对我有用。

关于reactjs - getInitialProps永远不会被调用……我在做什么错？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51316537/