如何解决如何为字符串类型分配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)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。