Next.js ReactコンポーネントgetInitialPropsが小道具をバインドしない

Question

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

the ZEIT tutorial（あるいはon their 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> 
    } 
} 

Answer 1

getInitialProps私が正しくリコール場合React.createClassの機能であり、React.Componentのために存在していません。

あなたには、いくつかのデータを取得したい場合は、（WillMountが推奨されません）componentDidMountでそれを行います。あなたのレンダリング関数は、最初のレンダリングにフェッチされたデータがないことに気付かなければなりません。またフェッチを1レベル上に移動し、コンポーネントを「ダンベル」にして、表示する特定の小道具を受け取るだけです（推奨）。

はまた、あなたが唯一のあなたは自分のエントリポイントファイルまたはその付近でこれを行うことができますので、一度お使いのアプリで同型フェッチインポートする必要があります注意してください。

import React, { Component } from 'react' 

export default class extends Component { 
    constructor() { 
     super(); 
     this.state = {}; 
    } 
    async componentDidMount() { 
     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(); 
     this.setState({ data }); 
    } 
    render() { 
     const data = this.state.data; 
     if (!data) { 
      return <div>Loading...</div>; 
     } 
     return <div>{JSON.stringify(data)}</div> 
    } 
} 

Answer 2

私はあなたのコードを試してみましたし、正常に動作するよう、コンソールがthis.propsを示しています

Answer 3

あなたは

あなたのコードに少し変更して、このよう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> 
    } 
}