从 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) {
	switch(data.templateType) {
		case 'typeone':
			if(data.dataSource === 'local') {
				this.state.componentVirtualNodes.push(<typeOne content={'data from local Storage'} />);
			} else {
				let componentData = "get component's data from ajax call";
				this.state.componentVirtualNodes.push(<typeOne content={componentData} />);
			}
		case 'typetwo':
			if(data.dataSource === 'local') {
				this.state.componentVirtualNodes.push(<typeTwo content={'data from local Storage'} />);
			} else {
				let componentData = "get component's data from ajax call";
				this.state.componentVirtualNodes.push(<typeTwo content={componentData} />);
			}
		case 'typethree':
			if(data.dataSource === 'local') {
				this.state.componentVirtualNodes.push(<typeThree content={'data from local Storage'} />);
			} else {
				let componentData = "get component's data from ajax call";
				this.state.componentVirtualNodes.push(<typeThree content={componentData} />);
			}
		case 'typefour':
			if(data.dataSource === 'local') {
				this.state.componentVirtualNodes.push(<typeFour content={'data from local Storage'} />);
			} else {
				let componentData = "get component's data from ajax call";
				this.state.componentVirtualNodes.push(<typeFour content={componentData} />);
			}
       // And so on for the rest of the type of templates
	}
}

  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 的函数在结果可用时返回结果。当 Promise 完成时，你渲染组件。你可以查看这个库Q 来使用 Promise。

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