Rendern mehrerer React-Komponenten aus der AJAX-Antwort

Question

Ich versuche, mehrere Komponenten aus der Antwort eines Ajax-Aufrufs zu rendern, hier sind die Beispielantwortdaten dieses Aufrufs.

{ 
 
    "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" 
 
    }  
 
    ] 
 
}

Und nach ist die wichtigste Komponente Klasse, die im Hinblick auf die Seite erzeugt: für Komponenten zu erzeugen, arbeitet gut

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>

Der obige Code die Komponenten, deren Daten im lokalen Speicher verfügbar sind. Aber die Komponenten, deren Daten von den anderen Ajax-Apis stammen, werden nicht gerendert, und ich denke, der Grund dafür ist, dass die Daten für sie bereit sind, da sie von einem anderen AJAX stammen.

Ich hoffe, ich bin klar mit der Frage, bitte lassen Sie mich wissen, wenn Sie ein anderes Detail benötigen. Jede Art von Hilfe wird sehr geschätzt.

Ich versuchte, einen Zustand zu halten, um das Objekt von virtuellen Knoten in der Hoffnung zu halten, dass, wenn der Zustand aktualisiert wird, die Ansicht gerendert wird. Aber das funktioniert nicht. Ich habe auch versucht, forceUpdate() Methode der Komponente auch, aber das hilft auch nicht.

Während ich über das Internet suchte und fand, dass componentDidMount() oder componentWillReceiveProps() kann für solche Dinge hilfreich sein, aber ich weiß nicht, wie man sie für meinen Fall verwendet.

Vielen Dank im Voraus.

Answer 1

Lassen Sie Ihre Funktion, die den Ajax-Anruf zurückgibt, eine promise zurückgeben, um das Ergebnis zurückzugeben, wenn das gleiche verfügbar ist. Wenn das Versprechen abgeschlossen ist, rendern Sie die Komponente. Sie können in diese Bibliothek Q für die Verwendung von Versprechen suchen.

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