FlatList 在获取更多数据时变得无响应

Question

我正在尝试使用 FlatList 创建无限滚动。但是，我注意到，当到达末尾时将更多数据获取到 FlatList 时，应用程序没有响应，并且在获取数据之前我无法按任何地方。

获取数据时，不会出现console.log，因为按下事件无响应。

这是代码：

import { FlatList, Text } from "react-native";
import * as S from "./styles";
import { useQuery } from "@apollo/client";
import { searchUsers } from "src/services/users/graphql/query";
import React, { useState } from "react";
import { getImagePathFromObj } from "@helpers/getImagePath";

export const Playground = () => {
    const [users, setUsers] = useState([]);
    const { loading, error, fetchMore } = useQuery(searchUsers, {
        variables: {
            name: "",
            latestLatitude: 64.71998823308158,
            latestLongitude: 175.5945099215997,
            page: 1,
        },
        onCompleted: (data) => {
            setUsers(data?.searchUsers || []);
        },
        onError: (error) => {
            console.error("Error fetching users:", error);
        },
    });

    const handleLoadMore = async () => {
        fetchMore({
            variables: {
                name: "",
                latestLatitude: 64.71998823308158,
                latestLongitude: 175.5945099215997,
                page: 1,
            },
            updateQuery: (previousResult, { fetchMoreResult }) => {
                setUsers((prev) => [...prev, ...fetchMoreResult?.searchUsers]);
            },
        });
    };

    const RenderItem = React.memo(({ item }) => {
        console.log("item", item);

        return (
            <S.Profile onPress={() => console.log("press")}>
                <S.ProfileImage source={{ uri: getImagePathFromObj(item) }} />
            </S.Profile>
        );
    });

    const renderItem = (props) => <RenderItem {...props} />;

    const keyExtractor = (item) => item.id.toString();

    return (
        <S.Container>
            {loading && <Text>Loading...</Text>}
            {error && <Text>Error loading users</Text>}
            <FlatList
                data={users}
                renderItem={renderItem}
                keyExtractor={keyExtractor}
                numColumns={2}
                onEndReached={handleLoadMore}
                onEndReachedThreshold={1}
                initialNumToRender={1}
            />
        </S.Container>
    );
};

我也尝试过记忆 renderItem 组件，但没有成功。

我猜每当用户状态更新时就会出现问题。

我不知道 FlatList 是否可以实现所需的行为，但我感谢任何帮助！

Answer 1

您应该在 fetchMore 调用中修改数据，而不是直接在 updateQuery 函数中设置状态。您可以利用 updateQuery 函数将新数据附加到现有列表

 const handleLoadMore = async () => {   
        if (loading) return; // Prevent multiple requests       
        fetchMore({ 
        await fetchMore({   
            variables: {    
            variables: {    
                name: "",   
                name: "",
                latestLatitude: 64.71998823308158,
                latestLatitude: 64.71998823308158,  
                latestLongitude: 175.5945099215997, 
                latestLongitude: 175.5945099215997, 
                page: 1,    
                page: Math.floor(users.length / PAGE_SIZE) + 1, 
            },
            },
            updateQuery: (previousResult, { fetchMoreResult }) => {
            updateQuery: (previousResult, { fetchMoreResult }) => {
                if (!fetchMoreResult) return previousResult;    
                return {
                    ...previousResult,
                    searchUsers: [
                        ...previousResult.searchUsers,
                setUsers((prev) => [...prev, ...fetchMoreResult?.searchUsers]);
                        ...fetchMoreResult.searchUsers,
                    ],  
                };
            },  
            },  
        }); 
        });
    };  
    };

也变

onEndReachedThreshold = 0.5