带有React Native的Firebase V9-显示名称更新太慢

Question

我是新来的反应，火球和堆栈溢出，所以请耐心等待。我正在尝试创建一个带有firebase的用户注册表单，其中包含一个"名称"输入。它确实可以更新显示名称，但速度不够快，无法在用户第一次登录时显示名称。我需要保存homescreen.js文件，然后填充显示名称。

registerscreen.js 中的代码

const [name, setName] = useState('')
const handleRegister = async () => {
if (confirmPass !== password){
alert('Passwords Do Not Match')
return false}
else{
}
try{ 
const user = await createUserWithEmailAndPassword(auth, email, password)
updateProfile(auth.currentUser, {displayName: name}) 
console.log('logged in with', user.email)
} catch (error) {
alert(error.message);
}

这是homescreen.js上显示用户名的文本：

<Text style={styles.text}>Logged in as {auth.currentUser?.displayName}</Text>

Answer 1

就像createUserWithEmailAndPassword一样，对`updateProfile的调用是一个异步调用，所以您需要等待，直到它完成：

await updateProfile(auth.currentUser, {displayName: name}) 

Answer 2

我认为您有两个不错的选择。

1. 在用户注册时本地保存用户的显示名称，例如在Context或AsyncStorage中，并在登录屏幕上使用该名称。在AsyncStorage中，它看起来像这样：

// registerscreen.js
await AsyncStorage.setItem('name', name);
// homescreen.js body
const name = await AsyncStorage.getItem('name');
// homescreen.js return
<Text style={styles.text}>Logged in as {auth.currentUser?.displayName || name}</Text>

AsyncStorage的文档在这里。

2. 显示加载指示器，直到您的Firebase请求返回显示名称

// homescreen.js body
// get auth object, however you are doing this already
const auth = await getAuth();
// homescreen.js return
return (
auth?.currentUser
? // your current component here
: <LoadingScreen />
);

LoadingScreen可能类似

<View style={[StyleSheet.absoluteFill, { justifyContent: 'center', alignItems: 'center'>
<LoadingIndicator />
</View>