如何为字符串类型分配Promise <string>

问题描述

我对Javascript和React领域非常陌生。 我目前正在使用Ionic框架构建应用程序。它正在使用现有的Firebase项目。

我正在尝试使用我的react组件中的此功能从Firebase存储中获取化身图像：

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

然后我调用该函数以使用从Firebase Auth此处获取的UserID获取下载URL：

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

我的问题是函数返回一个Promise<string>，但是src的{​​{1}}属性只需要一个简单的IonImage类型

这是我遇到的错误：String

我已经四处张望，但似乎找不到解决方法。

这里有人有什么想法吗？

解决方法

您正在做的是效果。您正在从服务器获取数据并将其呈现在组件中。

如果您正在使用功能组件，则需要查看useState和useEffect钩子。对于类组件，您需要在组件上使用状态和生命周期方法。

本质上，您的src属性应该是一个状态项（在组件的生命周期中可能会发生变化，这需要做出反应才能更新DOM），您可以将其初始化为空字符串或本地占位符图像

然后，您的效果代码将更新您的状态值，并做出反应以告知DOM发生了什么变化。

编辑：我应该补充一点，在useEffect钩子中使用异步函数没有任何问题。请注意，回调函数useEffect期望不能是异步的。但是没有什么可以阻止您将异步函数放入回调中并在其中调用它。或使用异步IIFE。两者都是React中的常见模式...

,

反应钩子将适用于这种情况。这是使用您的代码段的示例

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} />
    }

,

代替先调用promise，然后使用结果设置src

getAvatarRef（child.avatarId）.then（src => someImg.src = src）