Entonces, estoy tratando de representar una función que se llama cuando mi IU se procesa y obtiene la información necesaria. El problema es que, dado que esta función debe ser una función asíncrona, no puedo procesar html.
async function getImages(path) { var x; try { const { data, error } = await supabase.storage.from('avatars').createSignedUrl(url, 60000000) if (error) { throw error } if (data) { x = data.signedURL } } catch (error) { console.log('Error downloading image: ', error.message) } finally { console.log(x) } return (<img src={x} className='w-14 h-14 rounded-full border border-bordergray' />) } Llamo a esta función más tarde en mi render como de costumbre así: {getImages(imgurl)}
Obtuve el siguiente error -
Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.En realidad, querrás separar completamente la búsqueda del renderizado:
function Component() { const [data, setData] = useState(); //use effect to fetch on mount useEffect(() => { //fetch here, then store the result in the state }, []) if (data === undefined) return; //you can return some loader here return <img src={data} /> }Incluso es posible que desee crear un gancho personalizado si lo necesita en varios lugares.
Editar: por supuesto, puede pasar la URL de la imagen en los accesorios del componente. Por lo tanto, tiene un componente utilizado para cada imagen dinámicamente. Si no desea que este componente se represente antes de que tenga acceso a una URL, simplemente procéselo condicionalmente.