Populate非同期関数からプロットオブジェクトを返す

Question

私の上位目標は、テキストファイルからReactを使用して作成しているページにデータを読み込むことです。

私はパスして、ファイルを読み取るために使用しているユーティリティスクリプトファイルがありますので、私の1にコンポーネントファイルを反応させるのと同様に、私はその関数を呼んでいる

//reader.js 
window.readFile = function(filePath, callback) { 
    var request = new XMLHttpRequest(); 
    request.open("GET", filePath, true); 
    request.send(null); 
    request.onreadystatechange = function() { 
    if (request.readyState === 4 && request.status === 200) { 
     var type = request.getResponseHeader('Content-Type'); 
     if (type.indexOf("text") !== 1) { 
     callback(null, request.responseText); 
     } 
    } 
    } 
} 

を：

//component.js 
var data = {}; 

populateData(); 

function populateData() { 
    data.subject = "FILE TITLE"; 
    data.title = "FILE SUBJECT"; 
    window.readFile("../path/to/file", function(error, results){ 
    if (!error) { 
     data.content = results; 
    } 
    else { 
     console.log(error); 
    } 
    }); 
} 

var Content = React.createClass({ 
    render: function() { 
    return (
     <FileContent { ...data } /> 
    ); 
    } 
}); 

私は関数がこのコンテキストから正しく実行されることをテストしましたが、readFile関数の非同期性のために、データオブジェクトのコンテンツフィールドにはファイルのテキストが入力されないように見えます。私が必要とするものを同期的に返す方法はありますか、またはこれをどのように非同期的に解決できますか？

Answer 1

readFile関数の非同期性のため、この問題を非同期で解決する必要があります。これを行う最も簡単な方法は、関数を呼び出すメソッドをコンポーネントに追加し、それが完了した後に状態を設定することです。完了後、子コンポーネントにデータを渡すことができます。例えば

：

var Content = React.createClass({ 
    getInitialState() { 
    return { 
     data: null 
    } 
    }, 

    componentDidMount() { 
    this.populateData(); 
    }, 

    populateData() { 
    const data = {}; 
    data.subject = "FILE TITLE"; 
    data.title = "FILE SUBJECT"; 
    window.readFile("../path/to/file", (error, results) => { 
     if (!error) { 
     data.content = results; 
     this.setState({ 
      data 
     }); 
     } 
     else { 
     console.log(error); 
     } 
    }); 
    }, 

    render: function() { 
    const {data} = this.state; 

    if (data === null) { 
     // data has not been loaded yet 
     // you can add a loading spinner here or some kind of loading component 
     return null 
    } 

    return (
     <FileContent { ...data } /> 
    ); 
    } 
});