獲取從API行計數器數據

Question

通過使用下面的代碼，我們可以從服務器讀取數據：

class SearchPage extends Component { 
    constructor(props) { 
    super(props); 
    var dataSource = new ListView.DataSource({rowHasChanged:(r1,r2) => r1.ruid != r2.guid}); 
    this.state = { 
     id: 'SearchPage', 
     searchinpt: this.props.homesearchinpt, 
     shopid: this.props.shopid, 
     dataSource: dataSource.cloneWithRows(shopsArray), 
     isLoading: true 
    }; 

    } 

    componentDidMount(){ 
    this.fetchData(); 
    } 
    fetchData() { 
    var name = this.state.searchinpt; 
    var API_URL = 'http://myurl'; 
    var PARAMS = '?name=' + name; 
    var REQUEST_URL = API_URL + PARAMS; 

    fetch(REQUEST_URL) 
     .then((response) => response.json()) 
     .then((responseData) => { 
     this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(responseData), 
     loaded: true, 
     }); 
    }) 
    .done(); 
    } 
    renderLoadingView() { 
    return (
     <View style={styles.container}> 
     <Text>Loading</Text> 
     </View> 
    ); 
    } 
    SearchisEmpty() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.notfound}>Not Found</Text> 
     </View> 
    ); 
    } 
    SearchnotEmpty(){ 
    return (
     <ListView enableEmptySections = {true} 
     dataSource={this.state.dataSource} 
     renderRow= 
      {(shop) => 

      <TouchableOpacity 
       onPress={(shop_id) => this.onSubmitPressed(shop.shop_id)} > 
       <View style={styles.container} > 
       <Image 
        source={{uri: shop.shop_logo}} 
        style={{width: 50, height: 50}}> 
       </Image> 
       <View> 
        <Text style={styles.shop_name}>{shop.shop_name}</Text> 
        <Text style={styles.shop_description}>{shop.shop_description}</Text> 
       </View> 
       </View> 
       <Text>{this.state.searchinpt}</Text> 
       <Text>{this.state.dataSource.getRowCount}</Text> 
      </TouchableOpacity> 
      } 
      style={styles.listView} 

     /> 
    ); 
    } 
    onSubmitPressed(shopd){ 
    this.props.navigator.push({ 
     id: 'Shop', 
     passProps:{ 
     thisshopid: shopd 
     } 
    }) 
    } 
    render(shopsArray) { 
    if (!this.state.loaded) { 
     return this.renderLoadingView(); 
    }else if(this.state.length < 1){ 
     return this.SearchisEmpty(); 
    } else{ 
     return this.SearchnotEmpty(); 
    } 
    } 
} 

沒有任何問題的渲染。 現在我們有一些「如果」，每當沒有任何數據，必須顯示「未找到」，但代替（未找到）它顯示空白頁

我該如何解決問題？

Answer 1

this.state.length將始終爲undefined爲this.state是一個對象，而不是一個數組。

我會存儲在該狀態的行數，以便能夠控制此行爲。類似這樣的：

... 
fetchData() { 
    ... 

    fetch(REQUEST_URL) 
     .then((response) => response.json()) 
     .then((responseData) => { 
     this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(responseData), 
     loaded: true, 
     numRows: responseData.length 
     }); 
    }) 
    .done(); 
} 

... 

render(shopsArray) { 
    if (!this.state.loaded) { 
     return this.renderLoadingView(); 
    }else if(this.state.numRows < 1){ 
     return this.SearchisEmpty(); 
    } else{ 
     return this.SearchnotEmpty(); 
    } 
}