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 Native 中循环 Json 和显示
IT技术
javascript
json
reactjs
react-native
2021-05-16 19:39:25
1个回答
React 可以渲染一个 Elements 数组,因此您只需要构造一个数组并将其分配给您的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
很有希望)