javascript - Next.js React component getInitialProps doesn't bind props - Stack Overflow

admin管理员组

文章数量:1287967

In Next.js, you can use in your React ponents a lifecycle method bound to the server side rendering on first load.

I tried to use this function as presented in the ZEIT tutorial (alternatively on their Github), but this.props doesn't seem to get JSON returned by the function. When I click on the ponent, console print an empty object.

import React from 'react'
import 'isomorphic-fetch'
export default class extends React.Component {
    static async getInitialProps () {
        const res = await fetch('.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json')
        const data = await res.json()
        return { data }
    }
    print() {
        console.log(this.props);
    }
    render() {
        return <div onClick={this.print.bind(this)}>print props</div>
    }
}

In Next.js, you can use in your React ponents a lifecycle method bound to the server side rendering on first load.

I tried to use this function as presented in the ZEIT tutorial (alternatively on their Github), but this.props doesn't seem to get JSON returned by the function. When I click on the ponent, console print an empty object.

import React from 'react'
import 'isomorphic-fetch'
export default class extends React.Component {
    static async getInitialProps () {
        const res = await fetch('https://en.wikipedia/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json')
        const data = await res.json()
        return { data }
    }
    print() {
        console.log(this.props);
    }
    render() {
        return <div onClick={this.print.bind(this)}>print props</div>
    }
}

• javascript
• reactjs
• next.js

Share Improve this question Follow edited Jan 23, 2017 at 12:41 CommunityBot 111 silver badge asked Nov 30, 2016 at 13:33 imrokimrok 83711 gold badge99 silver badges2424 bronze badges 1

• 1 You have to get this in a /pages ponent. Otherwise getInitialProps is not called. Are you defining a page or a ponent? – elmasse Commented Aug 30, 2017 at 12:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I had this issue due to a problem in my _app.js (i.e. NextJS Custom App) which I caused while adding in Redux (not a Redux issue). As soon as I started using getInitialProps in a page my props were empty at render though data was there in the static call. The cause was the incorrect propagation of pageProps in my _app.js.

So in my case the fix was changing, in custom _app.js getInitialProps, this:

return {
  ...pageProps,
  initialReduxState: reduxStore.getState()
}

to:

return {
  pageProps: {...pageProps},
  initialReduxState: reduxStore.getState()
}

.. so the render method as seen in the NextJS doc link could wire them through.

you can make your call in getInitialProps method like this with little modification in your code

import React from 'react'
import 'isomorphic-fetch'
export default class extends React.Component {
    static async getInitialProps () {
        const res = await fetch('https://en.wikipedia/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json')
        const data = await res.json()
        return { jsonData: data }
    }
    print() {
        console.log(this.props.jsonData);
    }
    render() {
        return <div onClick={()=> this.print()}>print props</div>
    }
}

I tried your code and it seems to work fine, console shows this.props:

本文标签： javascriptNextjs React component getInitialProps doesn39t bind propsStack Overflow