react-native 渲染速度比从 firebase 加载数据要快得多

Posted 2023-04-18

【中文标题】react-native 渲染速度比从 firebase 加载数据要快得多

【英文标题】：react-native renders much faster than it can load data from firebase

【发布时间】：2021-05-19 03:54:10

【问题描述】：

我正在开发一个应用程序，人们可以选择商店并将其保存到他们的个人资料中。我正在使用 google firebase 身份验证来处理登录的用户。当用户访问个人资料屏幕时，它将从 firebase 加载数据。显示名称和选定的商店。

我有本地加载（硬编码）的所有商店的平面列表，它是人们选择和取消选择的商店列表。如果选中，该项目的背景将变为另一种颜色，表明它已被选中。从 firebase 加载时，如果选择了此商店中的任何一个，则必须更改背景。

  const selectStore = (index) => 
    const data = [...stores];
    data[index].selected = !data[index].selected;
    store(data);
  ;

当他们第二次访问屏幕时，它会从 firebase 加载数据并将其显示给用户。问题是屏幕在渲染来自firebase的所有数据之前加载得更快，它会显示名称和所有内容，但是当它到达选定的商店时，它加载页面的速度比渲染数据的速度快，因此显示只是一个商店列表，即使你选择了一些，如果我刷新屏幕，那么这次它会显示当前选择的商店。我想确保在加载设置为 true 之前它有一些时间来正确加载所有数据。

我使用以下方法获取当前用户的登录信息：

useEffect(() => 
    setLoading(true);
    var user = firebase.auth().currentUser;
    if (user) 
      fetchUser(user.uid);
     else 
      // No user is signed in.
      alert("if you see this message something has gone wrong!");
    
  , []);

然后我在 firebase 中创建了一个集合，用于保存其中的一些用户数据，包括选定的商店，它是一个数组：

  const fetchUser = async (userId) => 
    const userRef = db.collection("users").doc(userId);
    const doc = await userRef.get();
    if (!doc.exists) 
      console.log("No such user!");
     else 
      if (doc.data().fname.length === 0) 
        setUseFirstName("");
        setUseLastName("");
        setShopList([]);
       else 
        setUseFirstName(doc.data().fname);
        setUseLastName(doc.data().lname);
        setShopList(doc.data().supermarks);
        for (let i = 0; i < shopList.length; i++) 
          let index = shopList[i].id;
          selectStore(index - 1);
        
      
      setLoading(false);
    
  ;

当我想显示信息时，如果加载为真，它将显示加载指示器，然后它只会发布名字和姓氏，它不会选择商店。我怎样才能做到这一点？我的问题够清楚了吗？

【参考方案1】：

我不是 100% 清楚你在问什么，但是使用加载标志来呈现加载指示器看起来像这样：

  if(loading) 
    return (
      <View>
        <ActivityIndicator animating=true/>
        <Text>Loading your data...</Text>
      </View>
    )
   else 
    return (
      [Rest of your code here]
    )
  

【参考方案2】：

您应该使用 ActivityIndicator 来显示加载图标，直到您从 firebase 收到数据。

https://reactnative.dev/docs/activityindicator