Estoy recorriendo una serie de publicaciones. Cada publicación tiene una identificación de usuario única asociada y estoy tratando de tomar esa identificación y llamar a otra API y devolver una URL de imagen.

Creé esta función que debería devolver la url

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

y luego lo puse en una etiqueta img con la identificación de la publicación actual.

 {data?.map((data) => ( <div className="allpostsingle" key={data.id} onClick={() => sendTo(data.id)}> <div className="allpostheader"> <img src={getUser} /> <p>Asiqur</p> </div> <div className="allpostimages"> <div className="allpostdiv"> <p>{data.wanted}</p> <img src={data.wanted_image} /> </div> </div> </div> ))}

El problema es que en lugar de devolver una url, devuelve una promesa. Así que intenté crear otra función para resolver la promesa así.

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

pero todavía devuelve una promesa. ¿Cómo puedo resolver esto, o hay una mejor manera de abordar esto?