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

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

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

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

文档中有点含糊，但在 custom app example 中它确实提到(强调我的):

Only uncomment [getInitialProps] if you have blocking data requirements for every single page in your application. This disables the ability to perform automatic static optimization, causing every page in your app to be server-side rendered.

这本质上意味着，如果您的自定义 _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 (没有任何内容被传递)，但它似乎很特别，而且现在对我有用，所以..