onEndReached FlatList React Native

Question

我目前在我的 React Native 项目中有一个 FlatList，用于呈现来自 nodejs 后端的帖子。我已将分页应用到我的后端，当我在邮递员上测试它时它正在工作。我的问题是当我在模拟器上测试我的应用程序时，当我到达第 0 页的末尾时，第 1 页没有加载。

这是我的平面列表：

 <FlatList
      data={posts} // to have all the data
      keyExtractor={(post) => post.id.toString()}
      renderItem={({ item }) => (
        <PostCard
          title={item.title}
          subTitle={item.subTitle}
        />
      )}
       onEndReached={onScrollHandler}
       onEndThreshold={0}
    />

 const { data: posts, error, loading, request: loadPosts } = useApi(
postsApi.getPosts
  );

 useEffect(() => {
loadPosts();
  }, []);

  const[page,setPage]=useState(0);
  const[profiles,setProfiles]=useState([]);

  const fetchRecords=(page)=>{
  const newRecords = []
  for(var i = page * 10, il = i + 10; i < il && i < posts.length; i++){
  newRecords.push(posts[i]);
  }
  setProfiles(...profiles, ...newRecords)
  }

 const onScrollHandler =()=>{
 setPage(page+1);
 fetchRecords(page)
 }

这是我的 nodeJS 后端：

  router.get("/",
  async (req, res) => {
  const getPagination = (page, size) => {
const limit = size ? +size : 10;
const offset = page ? page * limit : 0;

 return { limit, offset };
 };

const { page, size } = req.query;
 const { limit, offset } = getPagination(page, size);

 const posts = await Post.findAll({
 limit,offset,

我的路由是 /posts，我在后端的 index.js 中声明。

在我的后端应用分页之前，当我以前在前端执行 console.log(posts) 时，我曾经获取我所有的帖子，但是当我在执行 console.log(posts) 时应用分页后，我只得到帖子第一页。

Answer 1

你能不能试着把它放在 useEffect 中。

  useEffect(()=>{ apiCall()},[page])

Answer 2

如果我没记错的话，你想将新获取的记录与你已经拥有的记录连接起来，如果是这样，那么你应该像下面这样：

setProfiles([...profiles, ...newRecords])

示例：

let str1 = [1,2,3,4]
let str2 = [5,6,7,7]
// you dont want that
console.log(...str1, ...str2)

// but this, it will create a new array, 
// having elements of both str1 and str2 which is what should be 
console.log([...str1, ...str2])

例子：

import React, { useState } from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  const [posts, setPosts] = useState(
    Array.from({ length: 10 }, () => Math.floor(Math.random() * 100))
  );

  const onEndReached = () => {
    let newPosts = Array.from(
      { length: 4 },
      () => 'New Item Added ' + Math.floor(Math.random() * 100)
    );
    console.log(newPosts)
    setTimeout(() => {
      setPosts([...posts, ...newPosts]);
    }, 1000);
  };
  return (
    <View style={styles.container}>
      <FlatList
        data={posts}
        onEndReached={onEndReached}
        keyExtractor={(posts) => Math.floor(Math.random() * 1000)}
        renderItem={({ item }) => (
          <Card style={styles.card}>
            <Text style={styles.paragraph}>{item}</Text>
          </Card>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  card: {
    margin: 10,
    padding: 10,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Expo Demo

屏幕显示：

Answer 3

您是否检查过您的 onScrollHandler 函数是否在您到达平面列表末尾时被调用。

另外，请将您的平面列表包装在 SafeAreaView 中，并赋予 SafeAreaView 样式的 flex : 1

<SafeAreaView>
<FlatList/>
</SafeAreaView>