Цикл Json & Display в React Native

Как мне выполнить цикл результата, который я получил от Json? enter image description here

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>
    );
  }

1 ответов


React может отображать массив элементов, поэтому вам просто нужно построить массив и назначить его вашему contents переменной. Я сделал пример, используя 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, вы должны предоставить уникальный key атрибут для каждого элемента в массиве. понять, почему. В этом случае я использую item.user.email уникальный идентификатор, но вы можете использовать другой атрибут, просто убедитесь, что он уникален (item.user.md5 - это перспективно)