当我们到达列表底部时，React Native FlatList 加载更多

Posted 2023-02-22

【中文标题】当我们到达列表底部时，React Native FlatList 加载更多

【英文标题】：React Native FlatList load more when we get to the bottom of the list

【发布时间】：2018-12-18 03:38:41

【问题描述】：

如何使用 React Native 的 FlatList 增加负载 （不是无限的）

我已经这样做了，但不幸的是它会无限加载。

这是我的代码 sn-p

<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

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

【问题讨论】：

如何在 this.props.handleLoadMore() 函数中加载数据？

@nikolay-tomitov 更新了我的问题

@Mahdi Bashirpour，您使用了错误的 FlatList 道具。没有这样一个名为“onEndThreshold”的道具。它应该是“onEndReachedThreshold”。

@sandip-lipane 这两个我都用过，但问题没有解决

【参考方案1】：

在 FlatList 中加载数据时出现问题，并且在重新渲染视图时将调用您的 onEndReached 处理程序。尝试设置这样的标志：

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

然后添加这个方法：

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

将其连接到 FlatList：

<FlatList
onScroll=this.onScroll

最终仅在滚动时加载：

handleLoadMore = () => 
  if(!this.state.hasScrolled) return null; 

  //here load data from your backend

【讨论】：

嗨@Nikolay Tomitov，flatlist 中没有这样一个名为“onScroll”的道具。如何处理flatlist中的onScroll？

嗨！它继承自 ScrollView，在这里你可以看到它有 onScroll ：facebook.github.io/react-native/docs/scrollview#props

是的，我就是这么想的。其中必须有一个滚动视图和平面列表。需要将 onScroll 添加到滚动视图。对吗？

不完全是，FlatList 本身就是一种 ScrollView，因为它继承了 props。您可以在这里查看：facebook.github.io/react-native/docs/flatlist.html“道具”部分上方有：“也继承 ScrollView 道具，除非它嵌套在另一个相同方向的 FlatList 中。”。而 onScroll 就是这样一种道具。

感谢@Nikolay Tomitov，提供简要说明。我没看过那部分。

【参考方案2】：

constructor(props)
  super(props);
  this.state = 
    loading: true
  


   <FlatList  
 onEndReached=this.handleLoadMore/>

 handleLoadMore = () => 
        if(!this.state.loading) return null; 
        
        this.setState(
        page: this.state.page + 1,
        loading: false
        , () => 
        this.loadProducts(); 
        );
    ;

 loadProducts(catId,userkey)
          $this.setState( 
                loading:true
            );