javascript - 在 React Native 中循环 Json 和显示

Question

如何循环我从 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>
    );
  }

Answer 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 属性。 See why .在这种情况下，我使用 item.user.email 作为唯一标识符，但你可以使用另一个属性，只要确保它是唯一的(item.user.md5 很有前途)