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

}

类示例扩展了React.Component{
静态异步getInitialProps（）{
返回{
测试：“测试”
}
}
render（）{
返回(
嗨{this.props.test}
)
} 
}

因为

getInitialProps

只适用于Next.js中的页面，所以子组件的正确方法是使用

setState

而不是

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

我的问题是，我使用的是一个自定义应用程序（
/pages/_App.js
），其中有一个
getInitialProps

文档中有点模糊，但在文档中确实提到（我的重点）：

只有在应用程序中的每个页面都需要阻塞数据时，才取消对[getInitialProps]的注释这将禁用执行自动静态优化的功能，导致应用程序中的每个页面都在服务器端呈现。

这本质上意味着，如果您的自定义
\u 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

//pages/\u app.js
常量应用=（{Component，pageProps}）=>(
)
App.getInitialProps=异步（{Component，ctx}）=>{
让pageProps={}
if（Component.getInitialProps）{
pageProps=等待组件。getInitialProps（ctx）
}
返回{pageProps}
}
//pages/home.js
const Home=（{name}）=>你好，世界，认识{name}！
Home.getInitialProps=async（）=>{
返回{name:'Charlie'}
}
导出默认主页

我不知道为什么你不能直接返回
pageProps
（没有任何东西通过），但这似乎是一个特别的东西，它现在对我起作用了，所以..
只要删除
pages/\u app.js
文件就行了

这是因为_app.js覆盖了NextJS的默认值

如果您仍然希望将
getInitialProps
与\u app.js一起使用，则必须在\u app.js中声明此函数：

内部\u app.js：

导出默认类MyApp扩展应用程序{
静态异步getInitialProps（appContext）{
//你的逻辑是这样的
返回{}
}
render（）{
const{Component}=this.props；
返回(
)
}
}
您在哪里消费
示例
？从文档：
注意：getInitialProps不能用于子组件。仅在页面中。
示例
页面是页面还是页面的子页面？这对我来说很好。假设文件在页面中，并且像导出默认类Example一样导出，这非常有用，谢谢分享！要是我早点仔细阅读文档就好了……我已经寻找了半个小时的答案。谢谢兄弟，这解决了我的问题，太好了！
export default class MyApp extends App {
 static async getInitialProps(appContext){

  // your logic goes here

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

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