Reactjs 如何解析HTML标记属性的承诺？

我正在尝试使用React、GraphQL、Apollo、MongoDB和Express制作一个“最喜爱的专辑”应用程序。 我在实现自动从查询MusicBrainz API的本地主机服务器获取封面图片的功能时遇到问题。到目前为止，艺术吸引方面的工作非常完美：如果我输入艺术家+专辑组合，我将获得封面艺术，并且该专辑将返回到客户端

我的理想流程是：

• 当应用程序加载时，从MongoDB获取相册数据
• 如果相册具有

  缩略图

  属性（封面图片的URL），
  • 使用缩略图并显示图像
• 否则,，
  • 去拿封面画
  • 履行承诺后显示图像

问题是，

getAlbumCover（album）

总是返回承诺，就像

async

函数一样。我只是不确定我要做什么才能让它从fetch操作返回URL。任何帮助都将不胜感激

下面是相册组件的代码

import { useState } from 'react';

const Album = (props) => {

    const getAlbumCover = async (album) => {
        // Slugify text:
        function convertToSlug(Text) {
            return Text
                .toLowerCase()
                .replace(/ /g, '-')
                .replace(/\//g, '-')
                .replace(/[^\w-]+/g, '')
                ;
        }
        const artist = convertToSlug(album.artist.name);
        const name = convertToSlug(album.name);
        var result = await fetch(`http://localhost:5000/album-art/${artist}/${name}`, {
            method: 'get',
            headers: {
                'Accept': 'application/json'
            }
        })
            .then(res => res.json())
            .then((result) => {
                return (<img id={`img-${album.id}`} src={result} />);
            })
    }
    
    const album = props.album;
    return (
        <div className="album-container">
            <img id={`img-${album.id}`} src={album.thumbnail ? album.thumbnail : getAlbumCover(album)} />
            <div className="album-header">
                <h3><em>{album.name}</em> <span className="details-yor">({album.yearOfRelease})</span></h3>
                <h3>- {album.artist.name}</h3>
            </div>
        </div>
    )
}

export default Album;

从'react'导入{useState}；
康斯特相册=（道具）=>{
const getAlbumCover=async（相册）=>{
//slagify文本：
函数转换器插入（文本）{
返回文本
.toLowerCase（）
.replace（//g，'-'）
.replace（//\//g，'-'）
.替换（/[^\w-]+/g'）
;
}
const-artist=convertToSlug（album.artist.name）；
const name=convertToSlug（album.name）；
var result=等待获取(`http://localhost:5000/album-艺术/${artist}/${name}`{
方法：“get”，
标题：{
“接受”：“应用程序/json”
}
})
.then（res=>res.json（））
。然后（（结果）=>{
返回（）；
})
}
const album=props.album；
返回(
{album.name}（{album.yearOfRelease}）
-{album.artist.name}
)
}
导出默认相册；

如果需要检索封盖，请将其置于以下状态：

const Album = (props) => {
    const [cover, setCover] = useState('');

如果需要，在部件安装时取下盖子：

useEffect(() => {
    if (!props.album.thumbnail) {
        getAlbumCover();
    }
}, []);

然后渲染它：

<img id={`img-${album.id}`} src={album.thumbnail || cover} />

---

非常感谢您的帮助！那把它修好了。我曾多次尝试使用state，但由于重新渲染的次数过多，我不断出现错误。我考虑了useEffect，但不知道在这种情况下如何实现它。再次感谢你！

<img id={`img-${album.id}`} src={album.thumbnail || cover} />