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 apis的组件没有渲染，我认为，原因是数据已经准备好了，因为它们来自另一个AJAX。

我希望我清楚这个问题，如果您需要其他细节，请告诉我。非常感谢任何形式的帮助。

我尝试维护一个反应状态来保存虚拟节点的对象，希望每当状态更新时，都会呈现视图。但这不起作用。我也尝试了组件的forceUpdate()方法，但这也没有帮助。

当我在网上搜索时发现componentDidMount()或componentWillReceiveProps()对这些事情有帮助，但我不知道如何在我的情况下使用它们。

提前致谢。

Answer 1

让你的函数使ajax调用返回promise以在结果可用时返回结果。承诺完成后，您将渲染组件。您可以查看此库Q以使用promises。

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

从AJAX响应中渲染多个React组件

1 个答案: