我在访问
JSON数据中的对象数组时遇到问题,无法在React Native Text组件中显示.
JSON数据
{
"name": "Pizza Joint","when": [{
"day": ["Sat","Sun"],"start_time": "11:00","end_time": "23:00"
}]
}
码
<View style={styles.container}>
<Text style={styles.name}>{venue.name}</Text>
<Text style={styles.time}>{venue.when[0].start_time}</Text>
</View>
这会抛出错误Undefined不是一个对象(评估’venue.when’)我不明白,因为console.log(scene.when类型)返回对象.
如何在此处访问when对象属性？
补充说明
我从this tutorial复制了应用程序结构.
这是VenueList.js：
'use strict';
var React = require('react-native');
var VenueDetail = require('./VenueDetail');
var {
Image,StyleSheet,Text,View,Component,ListView,TouchableHighlight,ActivityIndicatorIOS
} = React;
var styles = StyleSheet.create({
container: {
flex: 1,flexDirection: 'row',justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',padding: 10
},thumbnail: {
width: 53,height: 81,marginRight: 10
},rightContainer: {
flex: 1,},title: {
fontSize: 20,marginBottom: 8
},author: {
color: '#656565'
},separator: {
height: 1,backgroundColor: '#dddddd'
},listView: {
backgroundColor: '#F5FCFF'
},loading: {
flex: 1,justifyContent: 'center'
}
});
// var REQUEST_URL = 'https://www.googleapis.com/books/v1/volumes?q=subject:fiction';
var REQUEST_URL = 'http://apib.miniguide.es/wall/today';
class VenueList extends Component {
render() {
if (this.state.isLoading) {
return this.renderLoadingView();
}
console.log(this.state.dataSource);
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderVenue.bind(this)}
style={styles.listView}
/>
);
}
renderLoadingView() {
return (
<View style={styles.loading}>
<ActivityIndicatorIOS
size='large'/>
<Text>
Loading venues...
</Text>
</View>
);
}
constructor(props) {
super(props);
this.state = {
isLoading: true,dataSource: new ListView.DataSource({
rowHasChanged: (row1,row2) => row1 !== row2
})
};
}
componentDidMount() {
this.fetchData();
}
fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData),isLoading: false
});
})
.done();
}
renderVenue(venue) {
console.log(venue);
return (
<TouchableHighlight onPress={() => this.showVenueDetail(venue)} underlayColor='#dddddd'>
<View>
<View style={styles.container}>
<Image
// source={{uri: venue.images[0].url}}
style={styles.thumbnail} />
<View style={styles.rightContainer}>
<Text style={styles.title}>{venue.name}</Text>
<Text style={styles.author}>{venue.subtitle}</Text>
</View>
</View>
<View style={styles.separator} />
</View>
</TouchableHighlight>
);
}
}
module.exports = VenueList;
console.log(venue)生成以下格式的数据(为了示例的目的,我在这里简化了输出)：
{
name: 'Pizza Joint',when: [{
day: ['Sat','Sun'],start_time: '11:00',end_time: '23:00'
}]
}
解决方法
好吧我明白了.问题是我们的API生成的JSON数据集有一些文档和另一个定义数据的定义(例如,首先是指示特征的文档).所以React在第一个文档上抛出一个错误,它缺少我试图访问的属性.
为了解决这个问题,我在React组件中添加了三元表达式来检查属性是否存在：
renderVenue(venue) {
console.log(venue);
return (
<TouchableHighlight onPress={() => this.showVenueDetail(venue)} underlayColor='#dddddd'>
<View>
<View style={styles.container}>
<Image source={ 'images' in venue ? { uri: 'http://' + venue.images[0].url } : null}
style={styles.thumbnail} />
<View style={styles.rightContainer}>
<Text style={styles.title}>{venue.name}</Text>
<Text style={styles.author}>{venue.subtitle}</Text>
<Text style={styles.author}>{ 'when' in venue ? venue.when[0].start_date : null}</Text>
</View>
</View>
<View style={styles.separator} />
</View>
</TouchableHighlight>
);
}
}
无论如何,感谢您的评论,他们很有帮助.
