Reactjs 如何显示活动指示器，直到使用redux从firestore获取所有数据并在react native中显示

我在使用Redux的react本机应用程序中将FireBase用作数据库。在获取数据之前，我想显示一个活动指示器。我的Redux操作是：

export const fetchproducts=()=>{
    return  async dispatch=>{
       const items = []
       const db = firebase.firestore();
       db.collection("Shops").collection('products').get().then((querySnapshot)=> {
           querySnapshot.forEach((doc,i)=> {  
              items.push(new Product(
                  doc.id, 
                  doc.data().name, 
                  doc.data().description, 
                  doc.data().price, 
               ))
           });   
           dispatch({
              type:SET_PRODUCTS,
              products:items
           })
   }).catch((err)=>{
         throw err
      })
  }
 }

我的React原生js代码是：

const ProductsOverviewScreen = props => {
      const [isLoading,setIsLoading]=useState(false)
      const [isRefreshing,setIsRefreshing]=useState(false)
      const allshops = useSelector(state => state.shops.allshops);
      const [error,setError]=useState()
      const products = useSelector(state => state.products.availableProducts);
      const dispatch = useDispatch();

      const loadProducts=useCallback( async ()=>{
            setError(null)
            setIsLoading(true)
            try{
                await dispatch(productActons.fetchproducts())
            }catch(err){
                setError(err.message)
            }
            setIsLoading(false)
      },[dispatch,setIsLoading,setError])

      useEffect(()=>{
          const willFocusSub=props.navigation.addListener('willFocus',()=>{
          loadProducts()
      })
       return ()=>{
         willFocusSub.remove()
       }
       },[loadProducts])


      useEffect(()=>{
         loadProducts()
      },[dispatch,loadProducts])

    if(error)
      {
       return <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                 <Text>An error Occured </Text>
                 <Button title="Try Again" onPress={loadProducts} color={Colors.primary}></Button>
              </View>
      }  

     if(isLoading){
         return <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                    <ActivityIndicator size="large" color={Colors.primary}/>
                </View>
      }

     if(!isLoading&&products.length===0)
         {
          return <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                     <Text>No Products</Text></View>
         }

      return (
              <View>
                   <FlatList
                    horizontal={true}   
                    data={products}
                    keyExtractor={item => item.id}
                    renderItem={itemData => (
                                   <ProductItem
                                       image={itemData.item.id}
                                       title={itemData.item.name}
                                       price={itemData.item.price}
                                       onSelect={() => {
                                      selectItemHandler(itemData.item.id, itemData.item.title);
                                       }}
                                       >
                                      </ProductItem>
                )}
                />
          </View>

const ProductsOverviewScreen=props=>{
常量[isLoading，setIsLoading]=useState（false）
常量[isRefreshing，setIsRefreshing]=useState（false）
const allshops=useSelector（state=>state.shops.allshops）；
const[error，setError]=useState（）
const products=useSelector（state=>state.products.availableProducts）；
const dispatch=usedpatch（）；
const loadProducts=useCallback（异步（）=>{
设置错误（空）
setIsLoading（真）
试一试{
等待分派（productActons.fetchproducts（））
}捕捉（错误）{
设置错误（错误消息）
}
setIsLoading（错误）
}，[dispatch，setIsLoading，setError]）
useffect（（）=>{
const willFocusSub=props.navigation.addListener（'willFocus'，（）=>{
装载产品（）
})
return（）=>{
willFocusSub.remove（）
}
}，[loadProducts]）
useffect（（）=>{
装载产品（）
}，[dispatch，loadProducts]）
如果（错误）
{
返回
发生了一个错误
}  
如果（孤岛加载）{
返回
}
如果（！isLoading&&products.length==0）
{
返回
没有产品
}
返回(
项目id}
renderItem={itemData=>(
{
选择ItemHandler（itemData.item.id、itemData.item.title）；
}}
>
)}
/>

输出先显示“无产品”，然后显示产品，而不是显示活动指示器并显示产品变化

if(isLoading){
     return <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                <ActivityIndicator size="large" color={Colors.primary}/>
            </View>
  }

 if(!isLoading&&products.length===0)
     {
      return <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                 <Text>No Products</Text></View>
     }

if（正在加载）{
返回
}
如果（！isLoading&&products.length==0）
{
返回
没有产品
}

到

if（！isLoading&&products.length==0）{
返回
}
if（isLoading&&products.length==0）
{
返回
没有产品
}

---

希望这有帮助！

您是否尝试设置计时器并检查问题是否是请求结束为fast？它不起作用。它显示活动指示器，但在获取数据后不会消失。添加产品的另一个条件。长度==0 with！isLoading，我用它编辑了答案检查。

if(!isLoading && products.length===0){
         return <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                    <ActivityIndicator size="large" color={Colors.primary}/>
                </View>
      }

     if(isLoading&&products.length===0)
         {
          return <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                     <Text>No Products</Text></View>
         }