向上滚动 FlatList 时如何获取更多数据？答案

【问题标题】：How to fetch more data when scroll up FlatList react native?向上滚动 FlatList 时如何获取更多数据？
【发布时间】：2020-03-02 07:07:48
【问题描述】：

我正在将延迟加载应用到平面列表中。但是我只在向下滚动最后一个项目时获取更多数据。向上滚动时如何实现获取更多数据。我试过 onRefresh 我不知道为什么列表没有更新但数据已经改变。有人对这个问题有想法吗？

   <FlatList
      style={props.style}
      renderItem={renderRow}
      data={data}
      keyExtractor={(item, index) => String(index)}
      onRefresh={onRefresh}
   />

   function onRefresh(){
      dataFetch = fetchMoreData()
      setData([ ...dataFetch, ...data ])
   }

请帮助我。谢谢

【问题讨论】：

标签： react-native lazy-loading infinite-scroll react-native-flatlist

【解决方案1】：

根据您的描述，我写了向上滚动时可以无限滚动的代码，希望对您有所帮助。

function App() {
  const [records, setRecords] = useState([]);
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = async()=>{
    const fetchedRecords = await fetchRecords();
    const newRecords = fetchedRecords.concat(records);
    setRecords(newRecords);
    setRefreshing(false);
  }

  return (
    <FlatList
        onRefresh={onRefresh}
        refreshing={refreshing}
        keyExtractor={item => item.id}
        data={records}
        renderItem={({ item }) => Item(item)}
    ></FlatList>

  );
}

【讨论】：

谢谢。我已经实现了这一点。 flatlist 的数据发生了变化，但列表显示没有更新
我在你的onRefresh函数之前没有看到async，但是你使用await，可能是这个问题？
它的示例与我的代码不同。我已经调试并且数据已更改，但列表未更新

【解决方案2】：

extraData 将确保更新到 FlatList - https://reactnative.dev/docs/flatlist#extradata

 const [ renderCount, setRenderCount ] = useState(0);

 <FlatList
      style={props.style}
      renderItem={renderRow}
      data={data}
      keyExtractor={(item, index) => String(index)}
      onRefresh={onRefresh}
      extraData={renderCount}
   />

   function onRefresh(){
      dataFetch = fetchMoreData()
      setData([ ...dataFetch, ...data ])
      setRenderCount(renderCount + 1);
   }

【讨论】：