我有一个平面列表，它渲染了这么多的renderItem与数据加载从我的自定义后端。问题是当连接速度慢或当我重新加载这么多次，数据将不会加载预期和数据不渲染到屏幕或应用程序将崩溃。我使用自定义钩子来获取数据HttpHook：

import { useState, useCallback } from "react";

export const useHttpClient = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState();

  const sendRequest = useCallback(
    async (
      URL,
      method = "GET",
      body = null,
      headers = {},
      credentials = "include"
    ) => {
      setIsLoading(true);
      try {
        const res = await fetch(URL, { method, body, headers, credentials });
        const resData = res.json();

        if (!res.ok) {
          setError(resData.error);
        }
        setIsLoading(false);
        return resData;
      } catch (error) {
        setIsLoading(false);
        setError(error.message);
      }
    },
    []
  );

  const clearError = () => {
    setError(null);
  };
  return { isLoading, error, clearError, sendRequest };
};

渲染项目代码：

const renderItemComponent = ({ item }) => {
  return (
    <Spacer dir="vertical" size="small">
      <RestaurantCard restaurant={item} />
    </Spacer>
  );
};

屏幕代码：

export const RestaurantsScreen = () => {
  const { isLoading, error, clearError, sendRequest } = useHttpClient();
  const restaurantsContext = useContext(RestaurantsContext);

  const fetchRestaurants = async () => {
    const URL =
      "http://localhost:3000/api/location?lng=37.7749295&lat=-122.4194155";
    const { results } = await sendRequest(URL);
    const mappedResult = results.map((restaurant) => {
      return {
        ...restaurant,
        isOpenNow:
          restaurant.opening_hours && restaurant.opening_hours.open_now,
        isClosedTemporarily:
          restaurant.business_status === "CLOSED_TEMPORARILY",
      };
    });
    const loadedRestaurants = camelize(mappedResult);
    restaurantsContext.restaurants = loadedRestaurants;
    console.log(restaurantsContext.restaurants);
  };

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

  return (
    <SafeArea>
      <SearchContainer>
        <Searchbar placeholder="Search ..." />
      </SearchContainer>
      {isLoading && (
        <Center>
          <Text>Loading Restaurants ... </Text>
        </Center>
      )}
      {isLoading && restaurantsContext.restaurants.length === 0 && (
        <Center>
          <Text>No Restaurants Available</Text>
        </Center>
      )}
      {!isLoading && restaurantsContext.restaurants.length > 0 && (
        <RestaurantList
          data={restaurantsContext.restaurants}
          renderItem={renderItemComponent}
          keyExtractor={(item) => item.name}
          initialNumToRender={3}
        />
      )}
    </SafeArea>
  );
};

我想做的是逐步加载数据，所以从服务器取来的每一个数据都渲染到屏幕上，然后渲染下一个再下一个，怎么做呢？