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。

文档中有点含糊，但在自定义应用程序示例中确实提到了（强调我的）：

如果您对应用程序中的每个页面都有阻塞数据要求，则仅取消注释 [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 2

由于getInitialProps只适用于在Next.js页面，子组件的正确方法是componentDidMount用setState代替props。