代码之家  ›  专栏  ›  技术社区  ›  Mahdi Bashirpour

当我们到达列表的底部时,响应本地Flatlist加载更多

  •  3
  • Mahdi Bashirpour  · 技术社区  · 6 年前

    如何使用react native的flatlist增加加载 (非无限)

    我已经做到了,但不幸的是它的负载是无限的。

    这是我的代码段

    <FlatList
        data={this.props.data}
        renderItem={({ item, separators }) => (
            <TouchableHighlight
                onPress={() => this._onPress(item)}
                onShowUnderlay={separators.highlight}
                onHideUnderlay={separators.unhighlight}
            >
                <Text> {item.title} </Text>
            </TouchableHighlight>
        )}
        keyExtractor={item => item.id}
        ListFooterComponent={this.renderFooter}
        onEndReached={this.props.handleLoadMore}
        onEndThreshold={0}
    />
    

    我的手上还有更多

    handleLoadMore = () => {
        console.log("test"); // <---- this line run infinitely
        fetch(url, {
            method: "POST",
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
            },
            body: JSON.stringify(filters)
        })
            .then(response => response.json())
            .then(responseJson => {
                this.setState({
                    itemData: [
                        ...this.state.itemData,
                        ...responseJson.estate_list
                    ],
                    itemPage: this.state.itemPage + 1
                });
            })
            .catch(error => {
                console.error(error);
            });
    };
    
    1 回复  |  直到 6 年前
        1
  •  10
  •   Nikolay Tomitov    6 年前

    constructor(props){
      super(props);
      this.state = {
        hasScrolled: false
      }
    }
    

    onScroll = () => {
     this.setState({hasScrolled: true})
    }
    

    <FlatList
    onScroll={this.onScroll}
    

    handleLoadMore = () => {
      if(!this.state.hasScrolled){ return null; }
    
      //here load data from your backend
    
    }