URLを取得するタイミングはどちらですか

Question

私はサーバーからキーを取得し、このキーを使用して他のコンポーネントのデータを取得したいと考えています。

var Page = React.createClass({ 
    getInitialState: function() { 
     var key = this.getKey(); 
     return { key: key }; 
    }, 
    getKey: function() { 
     var key; 
     $.ajax({ 
      url: Api.GetMasterkey, 
      dataType: 'json', 
      data: { 
       urlParamter:'' 
      }, 
      async: false, 
      success: function (data) { 
       key = data; 
      }.bind(this), 
     }); 

     return key; 
    }, 
    render: function() { 
     return (
      <div> 
       <ContentA key={this.key} /> 
       <ContentB key={this.key} />     
      </div> 
     ); 
    } 
}); 

module.exports = Page; 

キーの値はurlPagramterによって決まります。 getKey関数でurlを解析しようとしていますが、urlがgetInitialStateの後にタイミングを示していることがわかります。

だから、どのタイミングでURLを取得するのが正しいのですか？私のデザインが間違っていたら、それを修正してください。

Answer 1

まず、これは少し話題にはなりますが、私には負担してください。keyをContentAとContentBに電話しないでください。これは、反応IDを生成するためにReactの内部メカニズムのために予約された名前であり、それが目的でない限り、それを別のものと呼ぶ。また、this.keyを参照することは意味がありません。それはそれはgetKeyから返されたときにkeyは常に不定になり、定義によると、私は非同期のAjax操作this.state.key

だろう。最初にページがレンダリングされる前に実際にkeyが必要な場合は、Reactで何かをレンダリングする前にAPI呼び出しを行う必要があります。 index.jsや他のエントリーポイントがあるとします。これは通常、ReactDOM.render（）と同じ場所です。このトップレベルファイルでは、API呼び出しを行います

$.ajax({ 
     url: Api.GetMasterkey, 
     dataType: 'json', 
     data: { 
      urlParamter:'' 
     }, 
     async: false, 
     success: function (data) { 
      /* This function is executed when data is received. Run ReactDOM.render from here, and pass data as a prop. */ 
     } 
    }); 

ページでは、単に渡された小道具を使用して初期状態を設定するだけです。

getInitialState: function() { 
    return { 
    key: this.props.data // or whatever you call your prop 
    }; 
} 

異なるアプローチ、ContentAとContentBは一瞬のためにキーがないもの扱うことができるならば、ページのcomponentDidMount機能にAjax呼び出しを行っている、と成功関数はAjaxの機能で呼び出されたときsetStateを呼び出します。

var Page = React.createClass({ 
    ... 
    ... 
    componentDidMount(){ 
    // Do Ajax stuff after the component has mounted 
    var that = this; 
    $.ajax({ 
     url: Api.GetMasterkey, 
     dataType: 'json', 
     data: { 
      urlParamter:'' 
     }, 
     async: false, 
     success: function (data) { 
      // Change state after the data has been received. 
      that.setState({ 
       key: data 
      }); 
     } 
    }); 
    } 
    ... 
    ... 
    ... 
}) 

は今、レンダリング機能は、APIからの応答の準備ができ次第、再びトリガーされます、そしてComponentAとComponentBは this.state.keyを参照することにより、キーを利用することができます。

Answer 2

var Page = React.createClass({ 
    getInitialState: function() { 
     var masterKey = this.loadMasterKey(); 
     return { masterKey: masterKey }; 
    }, 
    getURLParameter: function (name) {   
     return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null; 
    }, 
    loadMasterKey: function() { 
     var masterKey; 
     $.ajax({ 
      url: Api.GetMasterkey, 
      dataType: 'json', 
      data: { 
       id: this.getURLParameter('id'), 
      }, 
      async: false, 
      cache: false, 
      success: function (data) { 
       masterKey = data.SuccessPayLoad; 
      }.bind(this), 
      error: function (xhr, status, err) { 
       console.error(xhr, status, err.toString()); 
      }.bind(this) 
     }); 

     return masterKey; 
    }, 
    componentDidMount: function() { 
    }, 
    render: function() { 
     return (
      <div> 
       <Header /> 
       <Content masterKey={this.state.masterKey} />     
       <Footer /> 
      </div> 
     ); 
    } 
}); 

module.exports = Page; 

これは私のコードであり、ページはルートコンポーネントです。

getInitialState関数で、私がserverに送るデータがurlからget（getInitialState関数）であり、asyncをfalseに設定していることがわかります。

私はmasterKeyをContentのような子コンポーネントに渡し、ContentはこのmasterKeyを使用してサーバーasyncからデータを取得します。

私は、キーリターンの前に例外を処理するためのコンテンツにコードを書きません。プログラムは今良い仕事をしていますしかし、私はそれを処理する必要があります。