我在使用 React Native 时遇到了一个问题。我已经解析了一个 JSON 对象，需要遍历嵌套在其中的数组。我想获取列表中的所有 profiles 对象。
我尝试使用以下代码，但它没有获取配置文件对象。如何打印列表中的所有配置文件对象？
代码:
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Modal, Image, Platform } from 'react-native';
import { Spinner, Text, View, Content, Container,Item,Header,Body, Title, Button, Icon, InputGroup, Input, ListItem, List, Radio, CheckBox, Thumbnail, Card, CardItem, H3 } from 'native-base';
class Profile extends Component {
constructor(props) {
super(props);
this.state = {
radio1 : true,
check1: false,
modalVisible: false,
search: 'nativebase',
selectedItem: undefined,
results: {
items: []
}
}
}
setModalVisible(visible, x) {
this.setState({
modalVisible: visible,
selectedItem: x
});
}
toggleCheck() {
this.setState({
check1 : !this.state.check1
})
}
componentDidMount() {
var that = this;
this.search();
}
search() {
// Set loading to true when the search starts to display a Spinner
this.setState({
loading: true
});
var that = this;
return fetch('https://mysite.in/api/profilematch/25/')
.then((response) => response.json())
.then((responseJson) => {
// Store the results in the state variable results and set loading to
// false to remove the spinner and display the list of repositories
that.setState({
results: responseJson,
loading: false
});
return responseJson;
})
.catch((error) => {
that.setState({
loading: false
});
console.error(error);
});
}
render() {
var that = this;
return (
<Container>
<Content>
<List>
{this.state.loading? <Spinner /> : <List dataArray={this.state.results} renderRow={(results) =>
<ListItem button onPress={()=>this.setModalVisible(true, item)} >
<Thumbnail square size={80} source={{uri: results.avatar_url}} />
<Text>Name: <Text style={{fontWeight: '600', color: '#46ee4b'}}>{results}</Text></Text>
<Body>
<Text>{results.sur_name}</Text>
</Body>
</ListItem>
} />}
</List>
</Content>
</Container>
);
}
}
const styles = StyleSheet.create({
header : {
marginLeft: -5,
marginTop: 5,
marginBottom: (Platform.OS==='ios') ? -7 : 0,
lineHeight: 24,
color: '#5357b6'
},
modalImage: {
resizeMode: 'contain',
height: 200
},
bold: {
fontWeight: '600'
},
negativeMargin: {
marginBottom: -10
}
});
module.exports = Profile;
json:
[
{
"id": 4,
"profiles": [
{
"id": 18,
"first_name": "sweta",
"is_active": true
},
{
"id": 20,
"first_name": "Hiteshi",
"is_active": true
},
{
"id": 3,
"first_name": "Sneha",
"is_active": true
}
],
"user": 25
}
]
我想做的就是在列表中打印 profiles 对象。
最佳答案
在获取时添加另一个变量
that.setState({
//assuming profiles exist
profiles: responseJson[0].profiles,
});
创建 ListView
<ListView dataSource={this.state.profiles} renderRow={this.renderRow.bind(this)} />
显示数据
renderRow(rowData) {
return (<Text>{rowData.first_name}</Text>);
}
希望对您有所帮助。未经测试，但应该像这样工作。
关于javascript - 在 react-native 中迭代 JSON 数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46702123/