Exécuter une fonction asynchrone au retour de React
P粉545682500
P粉545682500 2023-09-07 17:31:08
0
1
517

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 ?

P粉545682500
P粉545682500

répondre à tous(1)
P粉009186469

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>
  );
};
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal