在本机反应中循环读取对象

Question

我试图构建一个从远程URL获取JSON的应用程序，然后使用此JSON构建几个视图。

这里是我的应用程序代码：

/** 
* DeepThoughts Template 
*/ 
'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableHighlight, 
} = React; 

var REQUEST_URL = 'http://www.geektime.co.il/appApi/main.json'; 

var AwesomeProject = React.createClass({ 
    getInitialState: function() { 
    return { 
     thought: '', 
    }; 
    }, 
    componentDidMount: function() { 
     this.fetchData(); 
    }, 
    fetchData: function() { 
     fetch(REQUEST_URL) 
     .then((response) => response.json()) 
     .then((responseData) => { 
      this.setState({ 
       thought: { title: responseData[0].title, content:responseData[0].content }, 
      }); 
     }) 
     .done(); 
    }, 
    render: function() { 
    return (
     <View style={styles.container}> 
     <View style={styles.textContainer}> 
      <Text style={styles.title}> 
      {this.state.thought.title} 
      </Text> 
      <Text style={styles.text}> 
      {this.state.thought.content} 
      </Text> 
     </View> 
     </View> 
    ); 
    } 
}); 

var Dimensions = require('Dimensions'); 
var windowSize = Dimensions.get('window'); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#FFFFFF', 
    }, 
    textContainer: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    }, 
    title: { 
    fontSize: 30, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    text: { 
    fontSize: 18, 
    paddingLeft: 20, 
    paddingRight: 20, 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
    buttonContainer: { 
    bottom: 0, 
    flex: .1, 
    width: windowSize.width, 
    backgroundColor: '#eee', 
    }, 
    button: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
    buttonText: { 
    fontSize: 30, 
    color: '#666666', 
    }, 
}); 

AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject); 

这工作，但我还没有找到如何创建一个for或while循环，甚至物体的阵图，以便按照创建视图的任何文件到JSON中的项目数量。

Answer 1

这不完全是一个循环，但基本上会调用表中每个元素的功能（在这种情况下，表是我迭代的表的数组），然后返回jsx div并添加列表，所以当我把{list}放在render函数的返回中时，它会显示所有的元素，就像angularjs中的ng-repeat一样。我希望这有帮助。

render: function() { 
    console.log(this.props); 
    var i = 0; 
    var list = this.props.tables.map(function(tableDataProps){ 
     if(i==4){ 
     i=1; 
    return <div> 
     <div className='row' style={styles.border}></div> 
     <div className="col-sm-3 col-sm-12" style={styles.padding}> 
       <h1 style={styles.headings}>{tableDataProps.title}</h1> 
       <h2>{tableDataProps.id}</h2> 
       <CurrentTable jobs={tableDataProps} /> 
      </div> 
      </div>  
     } 
     else{ 
     i++; 
    return <div className="col-sm-3 col-sm-12" style={styles.padding}> 
       <h1 style={styles.headings}>{tableDataProps.title}</h1> 
       <CurrentTable jobs={tableDataProps} /> 
      </div> 
     } 
    }); 
    return <div> 
    {list} 
    </div> 
}