J'essaie d'afficher un nom d'utilisateur d'une base de données Firebase dans une fonction de retour React.
J'ai une fonction appelée getUserName qui récupère le nom d'utilisateur de la base de données et le renvoie.
const getUserName = async () => {
try {
const docRef = doc(db, "users/" + auth.currentUser?.uid);
const userDocument = await getDoc(docRef);
const userData = userDocument.data() as UserData;
const userName = userData.name.split(' ')[0];
return userName;
} catch (error) {
console.error(error)
return "Failed to Retrieve UserName";
};
}
Ensuite, j'essaie de l'afficher dans le retour du composant React.
return (
<div>
Hi, {getUserName()}!
</div>
)
Mais j'obtiens cette erreur :
类型“Promise
Je ne suis pas sûr de ce que je fais de mal ici. J'utilise TypeScript, dois-je donc spécifier le type quelque part ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Le message d'erreur est très clair. Pour résoudre ce problème, vous pouvez modifier
getUserName函数以使用useState挂钩来存储用户名et mettre à jour de manière asynchrone.import { useState, useEffect } from 'react'; const MyComponent = () => { const [userName, setUserName] = useState(''); useEffect(() => { const getUserName = async () => { try { // some code here setUserName(userName); } catch (error) { console.error(error); setUserName("Failed to Retrieve UserName"); } }; getUserName(); }, []); return ( <div> Hi, {userName}! </div> ); };