Exécuter une fonction asynchrone au retour de React

Question

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”不可分配给类型“ReactNode”。ts(2322) const getUserName: () => 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 ?

Answer 1

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>
  );
};