时间戳

首页 > 解决方案 > 列表末尾的 React Native FlatList onEndReached 继续获取数据

javascript - 列表末尾的 React Native FlatList onEndReached 继续获取数据

问题描述

我有一种从 api 获取数据的方法，如下所示：

   const [data, setData] = useState([]);

   const fetchData = () => {
      const newData = [];
      callApi().then(data => {
         data.forEach(item => newData.push(item)
      }).then(() => {
         setData(newData);
      });
   }

每次到达列表末尾时，我都会调用此方法：

   <FlatList data={data} onEndReached={fetchData} onEndReachedThreshold={0.15} ... />

我的问题是，当到达列表的末尾（真正的结尾，我的意思是，没有更多数据要获取）时，此方法将继续被调用。

任何想法如何解决它？我曾想过第一次调用 api 来检索每个项目并获取总金额，但我认为这会使我的另一个方法“fetchData”变得愚蠢，因为在第一时间我将下载所有项目......但这里的问题是，在 api 中可以检索 1M 项。

谢谢你。

标签： javascriptreactjsreact-nativeinfinite-scroll

解决方案

推荐阅读