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

渲染没有任何问题。现在我们有一些＆＃34; if＆＃34;每当没有任何数据时，必须显示＆＃34;未找到＆＃34;，而不是（未找到）它显示空白页

我该如何解决这个问题？

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

从api行计数器获取数据

1 个答案: