直到我在 React Native 中刷新屏幕后，才會顯示加載微調器以及從 firebase 獲取的產品

Question

我正在使用 ActivityIndi​​cator 來顯示加載屏幕，而我的調度函數會調度操作並從 firebase 獲取產品並將其呈現在我的應用程序屏幕上，但這並沒有發生。 我的應用程序將商店中的產品顯示為虛擬數據，如果我刷新屏幕，則它會顯示來自 firebase 的數據，但不會顯示加載微調器以顯示加載是真實的。

ProductOverviewScreen.js：

import React, { useState, useEffect, useCallback } from "react";
import {
  FlatList,
  View,
  Button,
  Text,
  StyleSheet,
  Platform,
  ActivityIndicator,
} from "react-native";
import { useSelector, useDispatch } from "react-redux";
import { HeaderButtons, Item } from "react-navigation-header-buttons";

import ProductItem from "../../components/shop/ProductItem";
import * as cartActions from "../../store/actions/cart";
import * as productActions from "../../store/actions/products";
import CustomHeaderButton from "../../components/UI/HeaderButton";
import Colors from "../../constants/Colors";

const ProductOverviewScreen = (props) => {
  const [IsLoading, setIsLoading] = useState();
  const [IsRefreshing, setIsRefreshing] = useState(false);
  const [error, setError] = useState();
  const products = useSelector((state) => state.products.availableProducts);
  const dispatch = useDispatch();

  const loadedProducts = useCallback(() => {
    setError(null);
    setIsRefreshing(true);
    dispatch(productActions.fetchProducts())
      .then(setIsLoading(false))
      .catch((err) => {
        setError(err.message);
      });
    setIsRefreshing(false);
  }, [dispatch, setIsLoading, setError]);

  useEffect(() => {
    const willFocusSub = props.navigation.addListener(
      "willFocus",
      loadedProducts
    );
    return () => {
      willFocusSub.remove();
    };
  }, [loadedProducts]);

  useEffect(() => {
    const loading = async () => {
      setIsLoading(true);
      await loadedProducts();
      setIsLoading(false);
    };
  }, [dispatch, loadedProducts]);

  const selectItemHandler = (id, title) => {
    props.navigation.navigate("ProductDetail", {
      productId: id,
      productTitle: title,
    });
  };

  const addToCartHandler = async (itemData) => {
    setIsLoading(true);
    await dispatch(cartActions.addToCart(itemData.item));
    setIsLoading(false);
  };

  if (error) {
    return (
      <View style={styles.loadingSpiner}>
        <Text>An Error occurred! </Text>
        <Button
          title="Try Again"
          onPress={loadedProducts}
          color={Colors.primary}
        />
      </View>
    );
  }

  if (IsLoading) {
    return (
      <View style={styles.loadingSpiner}>
        <ActivityIndicator size="large" color={Colors.primary} />
      </View>
    );
  }

  if (!IsLoading && products.length === 0) {
    return (
      <View style={styles.loadingSpiner}>
        <Text>No Product Found!</Text>
      </View>
    );
  }

  return (
    <FlatList
      data={products}
      onRefresh={loadedProducts}
      refreshing={IsRefreshing}
      renderItem={(itemData) => (
        <ProductItem
          image={itemData.item.imageUrl}
          title={itemData.item.title}
          price={itemData.item.price}
          onSelect={() => {
            selectItemHandler(itemData.item.id, itemData.item.title);
          }}
        >
          <Button
            color={Colors.primary}
            title="View Details"
            onPress={() => {
              selectItemHandler(itemData.item.id, itemData.item.title);
            }}
          />
          {IsLoading ? (
            <ActivityIndicator size="small" color={Colors.primary} />
          ) : (
            <Button
              color={Colors.primary}
              title="To Cart"
              onPress={() => {
                addToCartHandler(itemData);
              }}
            />
          )}
        </ProductItem>
      )}
    />
  );
};

ProductOverviewScreen.navigationOptions = (navigationData) => {
  return {
    headerTitle: "All Products",
    headerLeft: () => (
      <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
        <Item
          title="Menu"
          iconName={Platform.OS === "android" ? "md-menu" : "ios-menu"}
          color={Platform.OS === "android" ? Colors.primary : "white"}
          onPress={() => {
            navigationData.navigation.toggleDrawer();
          }}
        />
      </HeaderButtons>
    ),
    headerRight: () => (
      <HeaderButtons HeaderButtonComponent={CustomHeaderButton}>
        <Item
          title="Cart"
          iconName={Platform.OS === "android" ? "md-cart" : "ios-cart"}
          onPress={() => {
            navigationData.navigation.navigate("Cart");
          }}
        />
      </HeaderButtons>
    ),
  };
};

const styles = StyleSheet.create({
  loadingSpiner: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    opacity: 1,
  },
});

export default ProductOverviewScreen;

我還在我的真實設備上檢查了模擬器 IOS 和 android。 如果我在我的真實設備上打開應用程序，那么應用程序會立即呈現來自 firebase 的數據，但不顯示加載微調器。

在 useEffect 中如果我嘗試添加需要異步代碼的依賴loading和一個從 firebase 獲取數據的函數，那么它會顯示一個錯誤，提示Can't find variable: loading 。

Answer 1

請使加載的產品從同步到異步