訪問要在React Native Text組件中顯示的對象數組

Question

訪問我的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 is not an object (evaluating 'venue.when')我不因爲console.log(type of venue.when)回報object理解。

如何在此處訪問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, 
     alignItems: 'center', 
     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' 
     }] 
} 

我注意到上述不JSON因爲鍵上的引號已被刪除。

Answer 1

好吧我想通了。問題在於我們的API生成的JSON數據集有一些文檔帶有另一個定義數據分隔的定義（例如，第一個是指示featured的文檔）。所以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> 
    ); 
    } 
} 

也許我們應該修改我們的API輸出。

在任何情況下，感謝您的意見，他們是有幫助的。