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'
        }]
}

我注意到上面的内容不是JSON,因为键上的引号已被删除.