react-native的呈现速度比从firebase加载数据要快得多

Question

我正在开发一个应用程序，人们可以选择商店并将其保存到他们的配置文件中。我使用谷歌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);
}
};

当我想要显示信息时，它会显示加载指示器，如果加载为真，它会发布名字和姓氏，它不会选择商店。我该怎么做呢?我的问题够清楚吗?

Answer 1

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

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

Answer 2

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

https://reactnative.dev/docs/activityindicator