React Starter KitのAjaxコール

Question

私は最初のReactアプリケーションを作成するのにReact Starter Kitを使用しています。私はAjax呼び出しに苦労しています。私は、このキットは、（アプリルーティングのために内部的に使用方法である）Ajaxの呼び出しを実行する方法埋め込んでいることを見た：私は私のコンポーネントでこれを追加しました

import fetch from '../../core/fetch'; 

をした後、ときAjax呼び出しを実行しようコンポーネントがロードされます。ここに私のコードは次のとおりです。

componentDidMount() { 

     var moduleManager = 'https://my_domain.com/my_endpoint'; 

     async function getModules (url) { 
      const response = await fetch(url); 
      const content = await response.json(); 
      return content; 
     }; 

     this.state.modulesList = getModules(moduleManager); 

     console.log(this.state.modulesList); 
    } 

私はまた私のレンダリング機能で状態値を使用しています：一緒に入れ

render() { 
    var rows = []; 
    for (var i = 0; i < this.state.modulesList.length; i++) { 
     rows.push(
      <li>{this.state.modulesList[i]}<li/> 
     ); 
    } 

このコードは私のコンソールでこれをログに記録します。そして、

Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined} 

Ajaxコールが実行され（正常に）、私のコンソールにはこれが表示されます：

Promise 
__proto__:Promise 
[[PromiseStatus]]:"resolved" 
[[PromiseValue]]:Array[16] 

もちろん、私のビューを更新する必要があります：ajax呼び出しを実行すると、配列メンバーごとに1行表示します。

私には何が欠けていますか？あなたのコードをテストすることなく

おかげ

Answer 1

私はやってお勧め何を：あなたが実際にフェッチ返すことはできません

constructor() { 
    ... 
    // Bind your async function to your stateful component's class 
    this.getModules = this.getModules.bind(this); 
} 

async getModules(url) { 
    try { 
    // Perform the ajax call 
    const response = await fetch(url); 

    // Convert respone to json 
    const content = await response.json(); 

    // Process your content (if needed) 
    ... 

    // Call setState() here 
    this.setState({someContent: content}); 

    } catch(e) { 
    console.error(e); 
    } 
} 

componentDidMount() { 
    this.getModules(`${URL}`); 
} 

/async機能からのデータを解析されました。 this MDN linkによると、async関数は、promiseを返します。実際のデータは、解析した後に取得すると予想されます。

あなたのケースでは、実際にはasync関数から返された値を通常の（同期）関数（componentDidMount）内で受け取ろうとしていました。あなたは私が提案したことを行うか、実際のcomponentDidMount関数で約束を解決して解析した後にsetStateを使用するのに.then()を使用することができます。

続きを読む前にasync機能とPromiseをお読みください。

運が良かった！

Answer 2

を、一つの問題は、あなたが間違ってmodifying state directlyだということです。それはrenderを引き起こさないため、ビューは更新されません。そのように、代わりにsetState()をお試しください：

<li>{this.setState({modulesList[i]})}<li/>