javascript - Hur kan jag tilldela en Promise<string> till en String-typ

Jag är helt ny i världen av Javascript och React. Jag bygger för närvarande en app med hjälp av Ionic-ramverket. Den använder ett befintligt Firebase-projekt.

Jag försöker hämta avatarbilder från Firebase Storage, med den här funktionen i min React-komponent:

  async function getAvatarRef(avatarId: string): Promise<String> {
    const avatarUrl = await avatarsRef.child(avatarId).getDownloadURL();
    return avatarUrl.toString();
  }

då kallar jag den funktionen för att få nedladdnings-URL:en med användar-ID:t som jag hämtar från Firebase Auth här:

<IonImg src={getAvatarRef(child.avatarId)} />

Mitt problem är dock att funktionen returnerar en Promise<string> men src-egenskapen från IonImage vill ha bara en enkel String-typ

Det här är felet jag får: Typ 'Promise<string>' kan inte tilldelas typen 'string'.

Jag har letat överallt men verkar inte kunna hitta en lösning.

Någon här som har några idéer?

Svar #1

Det du gör är en effekt. Du hämtar data från en server och renderar det i din komponent.

Om du använder funktionella komponenter vill du titta på useState och useEffect-hooks. För klasskomponenter behöver du använda state och en livscykelmetod på din komponent.

I huvudsak bör ditt src-attribut vara ett tillståndsobjekt (något som kan ändras under livstiden för din komponent och som kommer att kräva att React uppdaterar DOM) som du kan initiera som en tom sträng eller en lokal platshållarbild.

Då skulle din effektkod uppdatera värdet på ditt tillstånd och React kommer att hantera att tala om för DOM vad som ändrades.

REDIGERA: Jag bör tillägga att det inte är något fel med att använda en asynkron funktion inuti en useEffect-hook. Observera att callback-funktionen som useEffect förväntar sig inte kan vara asynkron. Men det finns inget som hindrar dig från att lägga en asynkron funktion inuti callbacken och kalla på den där. Eller att använda en asynkron IIFE. Båda är vanliga mönster i React...

Svar #2

React hooks skulle vara tillämpliga i situationer som denna. Här är ett exempel med dina kodsnuttar

function YourComp() {
      const [avatarUrl, setAvatarUrl] = useState<string>('');

      // run effect once 
     useEffect(() => {
        getUrl();
      }, []);
         
      async function getAvatarRef(avatarId: string): Promise<String> {
        const avatarUrl = await avatarsRef.child(avatarId).getDownloadURL();
        return avatarUrl.toString();
      }

     // Resolve Promise<string> to string
      const getUrl = (): void => getAvatarRef(
       child.avatarId
      ).then((res) =>
        setAvatarUrl(res.avatarUrl)
      );


     
      return <IonImg src={avatarUrl} />
    }

Relaterade artiklar