访问要在React Native Text组件中显示的对象数组

访问我的JSON数据中的对象数组以显示在React Native Text组件中时遇到问题。访问要在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因为键上的引号已被删除。

来源

2016-04-27 michaelbcn

是'{venue.when [0] .start_time]}'一个错字，并且您是否写过'{venue.when [0] .start_time}'？ – VonD

是的，一个错字，修复对不起 – michaelbcn

渲染代码中的路径访问似乎是正确的，在渲染函数中传递'''场地''的方式肯定有问题。在渲染之前尝试console.log场地对象。 –

好吧我想通了。问题在于我们的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输出。

在任何情况下，感谢您的意见，他们是有帮助的。

来源

2016-04-28 13:24:32 michaelbcn

访问要在React Native Text组件中显示的对象数组

回答

相关问题