Question

问题是当我创建paginaion按钮时，渲染正在循环中运行。当我从外部调用api时，我可以将所有数据存储在数据集中。我知道出了问题，但我无法亲自解决，所以任何人都可以建议解决方案来帮助改进吗？感谢。

SearchScreen.js

componentDidMount() {
      this.setState({isLoading: true},function(){
        this.fetchData(this.url)
      });
  }

  async fetchData(query, pageNo) {
    try {
      let response = await fetch(query);
      let responseText = await response.json(); 
      let json = await this.getData(responseText, pageNo);
    } catch(error) {
      console.error(error);
    }
  }

  async getData(responseText, pageNo){
    this.setState({      
      data: responseText.response.listings,
      isLoading: false,
      currentPage: pageNo,
      lastPage: responseText.response.total_pages
    });
  }

  PropertyList(arr, navigate) {
    return arr.map(function(property, i){
      return(
      <TouchableHighlight style={styles.button} underlayColor='#99d9f4'
            key={i} onPress={() => navigate('PropertyView', {property: property})} >
        <View key={i} style={styles.rowContainer}>
            <Image style={styles.thumb} source={{ uri: property.img_url }} />
            <View  style={styles.textContainer}>
              <Text style={styles.price}>{property.price_formatted}</Text>
              <Text style={styles.title}
                    numberOfLines={2}>{property.title}</Text>
            </View>
        </View>
      </TouchableHighlight>
      );
    });
  } 

  SetPage = (pageNo) =>{
    this.url = this.GetChangedUrl(pageNo);
    this.fetchData(this.url, pageNo);
  }

  GetChangedUrl = (pageNo) =>{
    return this.url.replace(/(page=\d+&)/g, 'page='+pageNo+ '&');
  }

  _formArray = (pageNo) =>{
    if (pageNo == 1){
      return [pageNo, pageNo+1, pageNo+2];
    }else if (pageNo == this.lastPage){
      return [pageNo-2, pageNo-1, pageNo];
    }else{
      return [pageNo-1, pageNo, pageNo+1];
    }
  }

  _createPageButton = (currentPage) =>{
    var array = this._formArray(currentPage);
    var btnBody = array.map( (item, i) => {
      return (
        <TouchableHighlight style={styles.pageButton} key={i} Onpress={this.SetPage(i)}>
          <Text style={styles.text} >{i + 1}</Text>
        </TouchableHighlight>    
      )
    });
    return btnBody;
  }

  render() {
    const { navigate } = this.props.navigation;
    const { params } = this.props.navigation.state;
    this.url = params.url;

    let propertyList;
    if (this.state.isLoading){
      propertyList = (
          <ActivityIndicator size={108} style= {styles.indicator}/> 
      )
    }else{
      propertyList = (
        <View >
          <View >
            <ScrollView >
              {this.PropertyList(this.state.data, navigate)}
              <View style={styles.separator}/>
              <View style={styles.pageContainer}>
                {this._createPageButton(this.currentPage)}
              </View>
            </ScrollView>
          </View>
        </View>
       )
    }

    return (
      <View>
          {propertyList}
      </View>
    )
  }
}

从这里

Whole Code

Answer 1

我认为这是由以下原因造成的：

Onpress={this.SetPage(i)}

应更改为：

Onpress={() => this.SetPage(i)}

您的代码在呈现时调用setPage并传递给onPress调用的结果，从而导致每次渲染时页面更改，从而导致新的负载。

获取循环渲染数据的数据时的setState

1 个答案: