react.jsの非同期実行タイミングがわからない

Question

私は、javascript/jquery関数を使用してデータベースからデータを取得し、初期レンダリングの前にウェブサイトの既存のフィールドに値を設定しようとしています。私の理解は、初期レンダリングの前に状態を準備するためにComponentWillMountを呼び出さなければならないということです。以下は、私が求めていたものと似ている、この質問と回答を見て、私は

componentWillMount:function() 
    { 
    var currentPage = location.hash; 
     getform(globalObj["#login"]["sessionId"], globalObj["#encsearch"]["ID"], formType, function(err, data) 
     { 
     console.log("Start form") 
     var info = data["FormData"]; 
     console.log("End form"); 
     }); 
     console.log("Start Outside") 
     this.setState({"fieldValuePairs": info}); 
     console.log(this.state.fieldValuePairs); 
     console.log("End Outside") 
    } 
    }, 
    render: function() { 
    console.log("Rendered first before FormData"); 
    return(
     <div className="twelve columns"> 
     <PageBuilder handleChange={this.handleChange} 
        pageName= {this.props.currentPage} 
        layoutConfig={this.state.layout} 
        initDataObj={this.state.fieldValuePairs} 
        rowClasses="row"/> 
     </div> 
    ); 
    } 
}); 

function getForm(sessionId, ID, formType, done) { 
       $.getJSON('/api/los/loans/loan/forms/get_form/', {"sessionId": sessionId, "Id": ID, "formType": formType}) 
       .done(function(data) { 
        done(null, data); 
       }).fail(function(err) { 
        done(err, null); 
       }).always(function() { 
           ; 
       }); 
} 

を持っているもののサンプル、 React fetch data in server before render ですが、大きな違いは、私が呼び出しからのデータを待っていますということですデータベースに戻ってきてください。 Javascriptはデータが戻ってくるのを待たないので、データが取得されて状態が更新される前に初期レンダリングが行われます。私はgetformエリア内でthis.state.fieldValuePairsを呼び出すこともできません。私はそれが機能の範囲にないためだと思います。以下は、コンソールログの実行順序です。

Start Outside 
End Outside 
Render first before FormData 
Start Form 
End Form 

質問：初期レンダリングの前にデータを取得するにはどうすればよいですか？それは機能が実行にあまりにも多くの時間を取っているためですか？var info = data["FormData"];

Answer 1

これは反応の仕組みではありません。最初のレンダリングの前にajaxからデータを取得することはできません。レンダリングされると、ドームを再レンダリングするためにthis.state値を更新する必要があります。

これを取得するには、=>関数の短縮文字を使用する必要があります。

var self = this; 
getform(globalObj["#login"]["sessionId"], globalObj["#encsearch"]["ID"], formType,function(err, data) 
    { 
    console.log("Start form") 
    self.setState({ info : data["FormData"] }); 
    console.log("End form"); 
    }); 

状態の値が更新された後、レンダリングは関数短縮