Next.js。如何在布局中调用组件的getInitialProps

JavaScript React.js

凯西里

2020-03-23

我将标题组件添加到布局中,但我不想为要使用getInitialProps的每个页面将道具从布局发送到标题

layout.js

import Header from './header'
export default ({title}) => (
      <div>
        <Head>
          <title>{ title }</title>
          <meta charSet='utf-8' />
        </Head>

        <Header />

        {children}
      </div>
    )

header.js

export default class Header extends Component {
    static async getInitialProps () {
      const headerResponse = await fetch(someapi)
      return headerResponse;
    }
    render() {
        console.log({props: this.props})
        return (
            <div></div>
        );
    }
}

控制台:道具:{}

App.js

  import Layout from './layout'
  import Page from './page'
  import axios from 'axios'

const app =  (props) => (
  <Layout >
    <Page {...props}/>
  </Layout>
)

app.getInitialProps = async function(){
  try {
    const response = await axios.get(someUrl)
    return response.data;

  } catch(e) {
    throw new Error(e);
  }
}

export default app

我想在Header组件中使用get initial props,但不触发

第2945篇《Next.js。如何在布局中调用组件的getInitialProps》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
Winter 2020.11.30

getInitialProps仅支持在page页面中使用,不可以在组件中使用

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android