AJAXレスポンスから複数のReactコンポーネントをレンダリングする

Question

Ajaxコールのレスポンスから複数のコンポーネントをレンダリングしようとしていますが、そのコールのサンプルレスポンスデータがあります。

{ 
 
    "componentList": [ 
 
    { 
 
     'componentLabel': 'Hey Folks', 
 
     "dataSource": "local", 
 
     'templateType': 'typeone' 
 
    }, 
 
    { 
 
     "componentLabel": "Hey Folks", 
 
     "templateType": "typetwo", 
 
     "dataSource": "api", 
 
     "api": "URL to get Data of This Template" 
 
    }, 
 
    { 
 
     'componentLabel': 'Hey Folks', 
 
     "dataSource": "local", 
 
     'templateType': 'typethree' 
 
    }, 
 
    { 
 
     "componentLabel": "Hey Folks", 
 
     "templateType": "typefour", 
 
     "dataSource": "api", 
 
     "api": "URL to get Data of This Template" 
 
    }, 
 
    { 
 
     'componentLabel': 'Hey Folks', 
 
     "dataSource": "local", 
 
     'templateType': 'typefive' 
 
    }, 
 
    { 
 
     "componentLabel": "Hey Folks", 
 
     "templateType": "typesix", 
 
     "dataSource": "api", 
 
     "api": "URL to get Data of This Template" 
 
    }, 
 
    { 
 
     'componentLabel': 'Hey Folks', 
 
     "dataSource": "local", 
 
     'templateType': 'typeseven' 
 
    }, 
 
    { 
 
     "componentLabel": "Hey Folks", 
 
     "templateType": "typeeight", 
 
     "dataSource": "api", 
 
     "api": "URL to get Data of This Template" 
 
    }, 
 
    { 
 
     'componentLabel': 'Hey Folks', 
 
     "dataSource": "local", 
 
     'templateType': 'typenine' 
 
    }, 
 
    { 
 
     "componentLabel": "Hey Folks", 
 
     "templateType": "typeten", 
 
     "dataSource": "api", 
 
     "api": "URL to get Data of This Template" 
 
    }  
 
    ] 
 
}

そして次のページにビューを生成する主成分クラスである：

import React from 'react'; 
 

 
class ComponentList extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state.componentVirtualNodes = []; 
 
    } 
 
    
 
    getComponentView(data) { 
 
\t switch(data.templateType) { 
 
\t \t case 'typeone': 
 
\t \t \t if(data.dataSource === 'local') { 
 
\t \t \t \t this.state.componentVirtualNodes.push(<typeOne content={'data from local Storage'} />); 
 
\t \t \t } else { 
 
\t \t \t \t let componentData = "get component's data from ajax call"; 
 
\t \t \t \t this.state.componentVirtualNodes.push(<typeOne content={componentData} />); 
 
\t \t \t } 
 
\t \t case 'typetwo': 
 
\t \t \t if(data.dataSource === 'local') { 
 
\t \t \t \t this.state.componentVirtualNodes.push(<typeTwo content={'data from local Storage'} />); 
 
\t \t \t } else { 
 
\t \t \t \t let componentData = "get component's data from ajax call"; 
 
\t \t \t \t this.state.componentVirtualNodes.push(<typeTwo content={componentData} />); 
 
\t \t \t } 
 
\t \t case 'typethree': 
 
\t \t \t if(data.dataSource === 'local') { 
 
\t \t \t \t this.state.componentVirtualNodes.push(<typeThree content={'data from local Storage'} />); 
 
\t \t \t } else { 
 
\t \t \t \t let componentData = "get component's data from ajax call"; 
 
\t \t \t \t this.state.componentVirtualNodes.push(<typeThree content={componentData} />); 
 
\t \t \t } 
 
\t \t case 'typefour': 
 
\t \t \t if(data.dataSource === 'local') { 
 
\t \t \t \t this.state.componentVirtualNodes.push(<typeFour content={'data from local Storage'} />); 
 
\t \t \t } else { 
 
\t \t \t \t let componentData = "get component's data from ajax call"; 
 
\t \t \t \t this.state.componentVirtualNodes.push(<typeFour content={componentData} />); 
 
\t \t \t } 
 
     // And so on for the rest of the type of templates 
 
\t } 
 
} 
 

 
    render() { 
 
    let responseData = 'Response from the structure Ajax Call'; 
 
    responseData.map(singleComponent => this.getComponentView(singleComponent)); 
 
    return (
 
     <div className="component-wrapper"> 
 
     {this.state.componentVirtualNodes} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
export default ComponentList;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

成分を生成するために上記のコードは、のために正常に動作していますデータをローカルストレージで使用できるコンポーネントしかし、データが別のAjax APIから来ているコンポーネントはレンダリングされていないと思います。その理由は、データが別のAJAXから来ているため、データが準備されているからです。

私は質問が明確であることを希望します。他の詳細が必要な場合はお知らせください。どんな種類の助けでも大歓迎です。

私は、状態が更新されるたびにビューがレンダリングされることを期待して、仮想ノードのオブジェクトを保持するための反応状態を維持しようとしました。しかし、それは動作していません。 また、コンポーネントのforceUpdate()メソッドも試しましたが、それも役立たないです。

私はインターネットで検索していましたが、componentDidMount()またはcomponentWillReceiveProps()がこのようなことに役立つことがありますが、私の場合に使用する方法がわかりません。

ありがとうございます。

Answer 1

ajax呼び出しを返す関数がある場合は、promiseを返して、結果が返ってくると結果を返します。約束が完了したら、コンポーネントをレンダリングします。約束を使用するために、このライブラリQを調べることができます。

https://www.npmjs.com/package/q