使用ReactHooks进行FlatList分页

import React, { useState, useEffect } from 'react';
import { FlatList } from 'react-native';

const MyComponent = () => {
  const [data, setData] = useState([]); // 初始数据为空数组
  const [page, setPage] = useState(1); // 初始页码为1
  const [isLoading, setIsLoading] = useState(false); // 是否正在加载数据的状态
  const [isRefreshing, setIsRefreshing] = useState(false); // 是否正在刷新数据的状态
  const pageSize = 10; // 每页显示的数据数量

  const fetchData = async () => {
    try {
      setIsLoading(true); // 开始加载数据，设置isLoading为true
      const response = await fetch(`API_URL?page=${page}&pageSize=${pageSize}`);
      const jsonData = await response.json();
      setData((prevData) => [...prevData, ...jsonData]); // 将新获取的数据与旧数据合并
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false); // 数据加载完成，设置isLoading为false
    }
  };

  useEffect(() => {
    fetchData(); // 组件加载时获取数据
  }, []);

  const refreshData = async () => {
    try {
      setIsRefreshing(true); // 开始刷新数据，设置isRefreshing为true
      const response = await fetch(`API_URL?page=1&pageSize=${pageSize}`);
      const jsonData = await response.json();
      setData(jsonData); // 替换原有数据为新获取的数据
      setPage(1); // 重置页码为1
    } catch (error) {
      console.error(error);
    } finally {
      setIsRefreshing(false); // 数据刷新完成，设置isRefreshing为false
    }
  };

  const handleRefresh = () => {
    if (!isRefreshing) {
      refreshData(); // 下拉刷新时刷新数据
    }
  };

  const loadMoreData = async () => {
    try {
      setIsLoading(true); // 开始加载更多数据，设置isLoading为true
      const nextPage = page + 1;
      const response = await fetch(`API_URL?page=${nextPage}&pageSize=${pageSize}`);
      const jsonData = await response.json();
      setData((prevData) => [...prevData, ...jsonData]); // 将新获取的数据与旧数据合并
      setPage(nextPage); // 更新页码为下一页
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false); // 加载更多数据完成，设置isLoading为false
    }
  };

  const handleLoadMore = () => {
    if (!isLoading) {
      loadMoreData(); // 滚动到底部时加载更多数据
    }
  };

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => <ListItem item={item} />}
      keyExtractor={(item) => item.id.toString()}
      refreshing={isRefreshing}
      onRefresh={handleRefresh}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={isLoading && <ActivityIndicator />}
    />
  );
};