如何使用函数返回 img 标签的 url

Question

所以我正在渲染一系列帖子。每个帖子都有一个与之关联的唯一用户 ID，我尝试在另一个 API 调用中使用该 ID 来返回该帖子的用户图像。

目前我的设置如下

渲染出帖子

             {data?.map((data) => (
                <div className="allpostsingle" key={data.id} onClick={() => sendTo(data.id)}>
                    <div className="allpostheader">
                        <img src={getUrl(data.user)}/>
                        <p>{data?.description}</p>
                    </div>
                </div>
              ))}

获取图片URL的函数

   const getUrl = async (id) => {
       let url = `http://127.0.0.1:8000/api/user/${id}/`
       const response = await fetch(url)
       const data = await response.json()
       const avatarurl = data.avatar
       return avatarurl
   }

问题是它返回的是一个承诺而不是 URL。我知道你可以将其设置为获取 url 的状态，但是这样每个帖子就不会是唯一的吗？

我只是想知道如何解决这个问题，或者是否有其他方法来解决这个问题。

Answer 1

正如您所说，您的函数返回一个承诺而不是 URL（我也遇到了同样的问题）。当任何异步函数像平常函数一样被调用时（它们将返回一个承诺而不是输出），这个问题都可能发生在任何异步函数上，除非您在通常的 JavaScript 代码中使用回调函数或 async/await 函数。但是在React中，异步函数应该使用UsEffect()hook ORcomponentDidMount()函数来调用。您需要参考如何在React中的UseEffect()内调用异步函数？如果你的反应组件是一个函数。或者参考如何在 componentDidMount 函数中调用异步函数？如果你的react组件是一个类，就知道如何在react中准确地使用它们来处理React组件中的异步函数。