2017-03-26 79 views
0

我已經開始使用React和Google Books API開發圖書搜索應用程序。然而,當我讀模擬器我已經遇到了一個錯誤:React Native元素類型無效使用ActivityIndi​​catorIOS時出錯Error

Element Type is invalid: expected a string (for built-in components) or 
a class/function (for composite components) but got: undefined. Check 
the render method of 'BookList'. 

考慮到我是相當新的反應,我希望有人也許能夠在下面我的代碼來指出錯誤(或多個)。我注意到我認爲可能有錯誤的地方。謝謝!

class BookList extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      isLoading: true, 
      dataSource: new ListView.DataSource({ 
       rowHasChanged: (row1, row2) => row1 !== row2 
      }) 
     }; 
    } 

    componentDidMount() { 
     this.fetchData(); 
    } 

    fetchData() { 
     fetch(REQUEST_URL[0]) 
     .then((response) => response.json()) 
     .then((responseData) => { 
      this.setState({ 
       dataSource: this.state.dataSource.cloneWithRows(responseData.items), 
       isLoading: false 
      }); 
     }) 
     .done(); 
     } 

    render() { 
     if (this.state.isLoading) { 
      return this.renderLoadingView(); 
     } 

    return (
     <ListView 
      dataSource={this.state.dataSource} 
      renderRow={this.renderBook.bind(this)} 
      style={styles.listView} 
      /> 
     ); 
    } 

// *** adding this function (and using it) began to cause issues **** 

    renderLoadingView() { 
     return (
      <View style={styles.loading}> 
       <ActivityIndicatorIOS 
        size='large'/> 
       <Text> 
        Loading books... 
       </Text> 
      </View> 
     ); 
    } 

    renderBook(book) { 
     return (
      <TouchableHighlight> 
       <View> 
        <View style={styles.container}> 
         <Image 
          source={{uri: book.volumeInfo.imageLinks.thumbnail}} 
          style={styles.thumbnail} /> 
        <View style={styles.rightContainer}> 
         <Text style={styles.title}>{book.volumeInfo.title}</Text> 
         <Text style={styles.author}>{book.volumeInfo.authors}</Text> 
         <Text style={styles.price}>{'Lowest Available Price: ' + book.volumeInfo.price}</Text> 
        </View> 
       </View> 
       <View style={styles.separator} /> 
      </View> 
     </TouchableHighlight> 
    ); 
} 
} 

var REQUEST_URL = ['https://www.googleapis.com/books/v1/volumes?q=subject:fiction']; 

回答

相關問題