javascript - Lagrr FlatList 反応ネイティブがすべてのアイテムをロードしない

Question

これは Mainscreen.js の私のコードです:

import React, {useState, useEffect} from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  Image,
  TouchableOpacity,
  Pressable,
  ActivityIndicator,
} from 'react-native';
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';
import {faPrescriptionBottle} from '@fortawesome/free-solid-svg-icons';
import {faMapMarkerAlt} from '@fortawesome/free-solid-svg-icons';
import {faIndustry} from '@fortawesome/free-solid-svg-icons';
import AsyncStorage from '@react-native-community/async-storage';

const Mainscreen = ({navigation}) => {
  const [warehouse, setWarehouse] = useState([]);

  const [pageCurrent, setPageCurrent] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    let isMounted = true;
    setIsLoading(true);
    fetchData();
    return () => {
      isMounted = false;
    };
  }, [pageCurrent]);

  const fetchData = async () => {
    const token = await AsyncStorage.getItem('idtoken');
    const apiURL =
      'https://cnpmwarehouse.herokuapp.com/warehouses/user?limit=2&page=' +
      pageCurrent;
    await fetch(apiURL, {
      method: 'GET',
      headers: {
        accept: 'application/json',
        Authorization: `Bearer ${token}`,
      },
    })
      .then((response) => response.json())
      .then((responseJson) => {
        setWarehouse(warehouse.concat(responseJson.data.warehouses));
        setIsLoading(false);
      });
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={warehouse}
        numColumns={1}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({item}) => (
          <Pressable
            onPress={() => {
              navigation.navigate('Detail', {
                idwarehouse: item.id,
              });
            }}>
            <View style={styles.card}>
              <Image
                style={styles.tinyLogo}
                source={require('../assets/images/blakcstonemain.jpg')}
              />
              <View style={{marginTop: 15}}>
                <View style={styles.info}>
                  <FontAwesomeIcon
                    style={styles.icon}
                    icon={faIndustry}
                    size={25}
                  />
                  <Text numberOfLines={3} style={styles.text}>
                    {item.name}
                  </Text>
                </View>
                <View style={styles.info}>
                  <FontAwesomeIcon
                    style={styles.icon}
                    icon={faMapMarkerAlt}
                    size={25}
                  />
                  <Text numberOfLines={3} style={styles.text}>
                    {item.address}
                  </Text>
                </View>
                <View style={styles.info}>
                  <FontAwesomeIcon
                    style={styles.icon}
                    icon={faPrescriptionBottle}
                    size={25}
                  />
                  <Text numberOfLines={3} style={styles.text}>
                    {item.description}
                  </Text>
                </View>
              </View>
            </View>
          </Pressable>
        )}
        ListFooterComponent={() => {
          return isLoading ? (
            <View style={styles.loader}>
              <ActivityIndicator size="large" color='red' />
            </View>
          ) : null;
        }}
        onEndReached={() => {
          setPageCurrent(pageCurrent + 1);
          setIsLoading(true);
        }}
        onEndReachedThreshold={10}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 15,
    paddingHorizontal: 15,
    backgroundColor: 'white',
  },
  card: {
    height: 400,
    backgroundColor: '#fff',
    alignItems: 'flex-start',
    marginBottom: 30,
    elevation: 20,
    borderRadius: 15,
    overflow: 'hidden',
  },
  tinyLogo: {
    width: 400,
    height: 280,
  },
  icon: {
    color: '#FC4646',
  },
  text: {
    fontFamily: 'Roboto-BoldItalic',
    fontSize: 20,
    marginLeft: 15,
  },
  info: {
    flexDirection: 'row',
    marginBottom: 10,
    marginHorizontal: 20,
  },
  loader: {
    marginTop: 10,
    alignItems: 'center',
  },
});

export default Mainscreen;

私のApiには16個のアイテム倉庫がありますが、アプリがロードされると6個のアイテムがロードされ、メッセージが表示されます:

VirtualizedList: 更新が遅い大きなリストがあります - renderItem 関数が、PureComponent、shouldComponentUpdate などの React パフォーマンスのベスト プラクティスに従うコンポーネントをレンダリングしていることを確認してください。 {"contentLength": 3766.09521484375, "dt": 1902, "prevDt": 1769}

API から 16 個のアイテムを完全にロードするにはどうすればよいですか?