Question

FlatList组件具有一个onEndReached prop。我正在实现一个简单的功能，当用户将屏幕滑动到列表的末尾时，应用程序会发送一个新请求，以从后端将更多项添加到列表中。以下是我尝试过的：

我首先创建了一个自定义组件MyCustomList，它只是FlatList的包装。有两个道具items和getMore。

const MyCustomList = ({items, getMore}) => {
      ...
      return (
          <FlatList
            keyExtractor={keyExtractor}
            data={items}
            renderItem={renderItem}
            onEndReached={getMore}
            onEndReachedThreshold={0}
            ListFooterComponent={myFooter}
    />
  );
  ...
  export default MyCustomList;
}

items是要在FlatList上显示的数据，
getMore是将请求发送到后端以获取更多项目的功能。滑动到列表的末尾应该会被调用。

在屏幕组件中，我使用上方的MyCustomList组件，如下所示：

import React, {useState} from 'react';
import MyCustomList from '../components/MyCustomList';
import {useQuery} from 'react-query';

const MyScreen = ({navigation}) => {

       const [page, setPage] = useState(1);

       // when screen is rendered, get the data from backend
       const {data, status} = useQuery('my-items', httpClient.fetchItems);

       // this is the function passed to MyCustomList component
       const getMoreItems = () => {
         // I expected to see this log every time when user swiped to the end of the list
         console.log('get next 10 items');
         setPage(page + 1);
      };

       return (
         <View>
            ...
            <MyCustomList items={data} getMore={getMoreItems} />
         </View>);
  };

如您所见，我在屏幕组件中将getMoreItems函数传递给MyCustomList。

运行我的应用程序时，仅在第一次显示屏幕时才看到我在getMoreItems函数中放入的日志消息一次。我当时还没有滑到列表的末尾，这对我来说很奇怪。之后，每次我滑动到列表的末尾时，都不会触发getMoreItems（我看不到该日志消息）。为什么呢？

P.S。滑动到列表的底部时，由于未触发getMoreItems，未调用setPage(page+1)，因此现在不重新渲染我的屏幕。

滑动到列表末尾时，不会调用FlatList的onEndReached回调

0 个答案: