获取从API行计数器数据

问题描述：

通过使用下面的代码，我们可以从服务器读取数据：获取从API行计数器数据

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(); 
    } 
    } 
}

没有任何问题的渲染。现在我们有一些“如果”，每当没有任何数据，必须显示“未找到”，但代替（未找到）它显示空白页

我该如何解决问题？

答

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(); 
    } 
}

获取从API行计数器数据

相关推荐