suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Führen Sie bei React Return eine asynchrone Funktion aus

Ich versuche, einen Benutzernamen aus einer Firebase-Datenbank in einer React-Return-Funktion anzuzeigen.

Ich habe eine Funktion namens getUserName, die den Benutzernamen aus der Datenbank abruft und zurückgibt.

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

Dann versuche ich es in der Rückgabe der Reaktionskomponente anzuzeigen.

return (
  <div>
    Hi, {getUserName()}!
  </div>
)

Aber ich bekomme diesen Fehler: 类型“Promise”不可分配给类型“ReactNode”。ts(2322) const getUserName: () => Promise

Ich bin mir nicht sicher, was ich hier falsch mache. Ich verwende TypeScript. Muss ich den Typ also irgendwo angeben?

P粉545682500P粉545682500553 Tage vor596

Antworte allen(1)Ich werde antworten

  • P粉009186469

    P粉0091864692023-09-08 00:16:12

    错误信息非常清楚。 要解决此问题,您可以修改 getUserName 函数以使用 useState 挂钩来存储用户名 并异步更新。

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

    Antwort
    0
  • StornierenAntwort