web-dev-qa-db-ja.com

Next.js ReactコンポーネントgetInitialPropsは小道具をバインドしません

Next.jsでは、Reactコンポーネントで、最初のロード時にサーバー側のレンダリングにバインドされたライフサイクルメソッドを使用できます。

ZEITチュートリアル （または Github上 ）に示されているようにこの関数を使用しようとしましたが、this.propsは関数によって返されるJSONを取得していないようです。コンポーネントをクリックすると、コンソールは空のオブジェクトを印刷します。

import React from 'react'
import 'isomorphic-fetch'
export default class extends React.Component {
    static async getInitialProps () {
        const res = await fetch('https://en.wikipedia.org/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>
    }
}
javascriptreactjsnext.js
4
imrok

私はあなたのコードを試しました、そしてそれはうまくいくようです、コンソールはthis.propsを示します：

Result object

0
Rudi

コードをほとんど変更せずに、このようなgetInitialPropsメソッドで呼び出しを行うことができます

import React from 'react'
import 'isomorphic-fetch'
export default class extends React.Component {
    static async getInitialProps () {
        const res = await fetch('https://en.wikipedia.org/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>
    }
}
0
Manish