Render Multiple React Components из AJAX Response

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 apis, не являются рендерингом, и я думаю, причина в том, что данные готовы для них, поскольку они поступают из другого AJAX.

Надеюсь, что я понял вопрос, пожалуйста, дайте мне знать, если вам нужны другие детали. Любая помощь наиболее ценится.

Я попытался поддерживать состояние реакции, чтобы удерживать объект виртуальных узлов в надежде, что всякий раз, когда состояние будет обновлено, будет отображаться представление. Но это не работает. Я тоже пробовал метод forceUpdate() компонента, но это тоже не помогает.

Пока я искал через Интернет и обнаружил, что componentDidMount() или componentWillReceiveProps() может быть полезен для таких вещей, но я не знаю, как их использовать для моего дела.

Заранее спасибо.

Answer 1

Имейте свою функцию, которая заставляет вызов ajax возвращать promise, чтобы вернуть результат, когда он доступен. Когда обещание будет завершено, вы выполните компонент. Вы можете изучить эту библиотеку Q для использования обещаний.

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