如何返回带有函数的img标签的url

Question

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

目前我的设置是这样的

渲染帖子

             {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>
              ))}

获取图片地址的函数

   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（我遇到了同样的问题）。任何异步函数在按常规函数调用时都可能发生此问题（它们将返回 promise 而不是输出），除非您在常规 JavaScript 代码中使用回调函数或 async/await 函数。但是在 React 中，应该使用 UsEffect() hook 或 componentDidMount() 函数调用异步函数。如果你的反应组件是一个函数，你需要参考How to call an async function inside a UseEffect() in React?。或者如果你的 react 组件是一个类，请参考 How to call an async function in componentDidMount function?，以了解如何在 react 中准确使用它们来处理 React 组件中的异步函数。

Answer 2

您不能将getUrl() 的返回值分配给src 属性，因为它是异步的并返回Promise。

你可以做的是为用户头像维护另一个状态，当你的data 更新时。例如，创建一个解析用户头像的函数

const resolveUserAvatars = async (users) => {
  const avatars = await Promise.allSettled(users.map(async ({ user }) => {
    const res = await fetch(`http://127.0.0.1:8000/api/user/${encodeURIComponent(user)}/`)
    if (!res.ok) {
      throw new Error(res.status)
    }

    return {
      user,
      avatar: (await res.json()).avatar
    }
  }))

  return Object.fromEntries(
    avatars
      .filter(({ status }) => status === "fulfilled")
      .map(({ value: { user, avatar } }) => [ user, avatar ])
    )
  )
}

然后在你的组件中...

const [ data, setData ] = useState([]) // init as an array
const [ avatars, setAvatars ] = useState({})
// avatars will look like
// { userId: imageUrl, ... }

useEffect(() => {
  resolveUserAvatars.then(setAvatars)
}, [ data ]) // execute when data changes

在你的 JSX 中

{data.map(({ id, user, description }) => (
  <div className="allpostsingle" key={id} onClick={() => sendTo(id)}>
    <div className="allpostheader">
      <img src={avatars[user] ?? "some/placeholder.png"}/>
      <p>{description}</p>
    </div>
 </div>
))}

另见Promise.allSettled()

Answer 3

单独获取每个用户的头像并为每个帖子发送请求并每次渲染帖子项目并不是一个好主意，如果您和后端 api 可能的话，只需在帖子中包含用户头像 url，以便轻松渲染它。 如果它不可能并且在 api 中有限制，您只需要在 useEffect 收到帖子数据后使用 Promiss.allSettled 获取所有发布用户数据并将用户数据附加到 postItem 或将其保存在单独的字典中然后设置状态以在其中呈现帖子和用户头像网址。

Answer 4

它不起作用，因为在您的 getUrl 是异步函数时呈现同步反应。正如其他一些答案指出的那样，您可以获取 componentDidMount 或 useEffect 挂钩中的所有 url 并更新状态。

如果您不想更改现有代码，也可以将 img 替换为您自己的 react 组件，以便它可以处理 promise。

function Image({src}){
  const [actualSrc, setActualSrc] = useState('placeholder image link')
  useEffect(()=>{
    src.then((url) => setActualSrc(url));
  }, [src]);
  
  return <img src={actualSrc}/>
}

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

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
}

这可能不是最好的性能，因为getUrl 将在每次渲染时发送一个新的 promise 引用。在这种情况下，最好将 id（getUrl 中的用户 ID）传递给 Image 组件，而不是一个承诺，并在其中包含获取实际 URL 的逻辑。

function Image({userId}){
  const [actualSrc, setActualSrc] = useState('placeholder image link')
  useEffect(()=>{
    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;

    getUrl(userId).then((url) => setActualSrc(url));
  }, [userId]);
  
  return <img src={actualSrc}/>
}

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