0

这是我在 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 函数呈现遵循 React 性能最佳实践的组件，如 PureComponent、shouldComponentUpdate 等。 {"contentLength": 3766.09521484375, "dt": 1902, "prevDt":第1769章

如何从 API 加载完整的 16 项？

4

1 回答 1

0

逻辑似乎很好尝试仅使用 await 并且不要将其与 then 结合使用

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

如果这不起作用 console.log responseJson 并检查您输入 fetchData 的次数和结果。

于 2020-10-29T09:52:58.733 回答