错误：创建<view>每个循环

Question

我正在尝试显示JSON，如下面的链接所示：

  

https://api.myjson.com/bins/ur1k

当我循环它时：

renderList(data) {
var num = Math.floor(Math.random() * 2000);
return(
data.map((singleData) => {
  return Object.keys(singleData).map((key) => {
    return(
      <View style={styles.row}>
        <Text>{key}- {singleData[key]}</Text>
      </View>
      )
  })
})
)
}

...

row: {
 flexDirection: 'row',
 height: 60,
 borderBottomWidth: 1,
 borderColor: 'black',
 justifyContent: 'space-between',
 alignItems: 'center',
 padding: 20
}

...

constructor(props){
  super(props);
  this.state = {
    data: [],
  }
}

componentWillMount(){
  api.getIsisData().then((response) =>{
    this.setState({
      data: response.result.data,
      key: '',
      values: []
    })
  })
}

模拟器的工作方式如下图所示：

但我想显示如下所示：

我在循环中哪里出错了？

Answer 1

我的回答

我刚刚创建了一个'rows'数组来获取每个对象的每一行并在视图上呈现。

renderList(data) {
  var num = Math.floor(Math.random() * 2000);
  return(
    data.map((singleData) => {
      var rows = []
      Object.keys(singleData).map((key,index) => {
        rows.push(<Text>{key} - {singleData[key]}</Text>)
      })
      return(
        <View style={styles.row}>
          {rows}
        </View>
      )
    })
  )
}

Answer 2

        for(var i =0;i < result.data.length;i++) {
       for(var key in result.data[i]{
             //do somethying with key}
    }
}

您可以将其附加到状态变量并将其全部放在格式<View>

中