循环Json&在React Native中显示 [英] Looping Json & Display in React Native

问题描述

如何循环从Json检索到的结果？

How do I go about looping the result i retrieved from Json?

render: function() {
     console.log(this.state.list);
     contents = (
      <View style={ styles.content }>
        <Text>Loaded</Text>

      </View>
     )
     return (
      <View style={ styles.container }>
        <View style={ styles.header }>
        <Text style={ styles.headerText }>XXX</Text>
        </View>
        <View style={ styles.content }>
            { contents }
        </View>
      </View>
    );
  }

推荐答案

React可以呈现一个数组元素，因此您只需构造一个数组并将其分配给内容变量。我使用 map 做了一个例子。

React can render an array of Elements, so you just need to construct an array and assign it to your contents variable. I made an example using map.

render: function() {
     console.log(this.state.list);
     contents = this.state.list.results.map(function (item) {
        return (
          <View key={item.user.email} style={ styles.content }>
            <Text>{item.user.email}</Text>
          </View>
        );
     });
     return (
      <View style={ styles.container }>
        <View style={ styles.header }>
        <Text style={ styles.headerText }>XXX</Text>
        </View>
        <View style={ styles.content }>
            { contents }
        </View>
      </View>
    );
  }

还有：当你在React中有一系列元素时，你应该提供数组中每个元素的唯一键属性。 了解原因。在这种情况下，我使用 item.user.email 获取唯一标识符，但您可以使用其他属性，只需确保它是唯一的（ item.user。 md5 正在承诺）

And also: when you have an array of elements in React, you should provide a unique key attribute to each element in the array. See why. In this case I use item.user.email for unique identifier, but you can use another attribute, just make sure it unique (item.user.md5 is promissing)

这篇关于循环Json&在React Native中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！