0
148
Viewspasando una función para mapear en reaccionar
Estoy tratando de renderizar una publicación de blog desde mi base de datos. pero necesito llamar a una función de imagen de descarga para cada elemento.
Traté de ponerlo en la función .map pero al obtener errores no estoy seguro de cómo hacerlo. Paso la función como apoyo al componente.
async function downloadImage(path) { try { setIsOpen(true); const { data, error } = await supabase.storage .from("public/job-photo") .download(`jobphotos/${path}.jpg`); if (error) { throw error; } const url = URL.createObjectURL(data); setAvatarUrl(url); } catch (error) { console.log("Error downloading image: ", error.message); } }borrador
dataFetch.map((item) => ( <div key={item.genid} className="flex flex-col rounded-lg shadow-lg overflow-hidden" {downloadImg(item.genid)} <div className="flex-shrink-0"> <img className="h-48 w-full object-cover" src={img} alt="" /> </div> <div className="flex-1 bg-white dark:bg-secondaryDark p-6 flex flex-col justify-between"> <div className="flex-1"> <p className="text-sm font-medium text-indigo-600 dark:text-white"> {item.category} </p> <p className="text-xl font-semibold text-gray-900 dark:text-yellow-400"> {item.jobname} </p> <p className="mt-3 text-base text-gray-500 dark:text-white"> {item.jobdescription} </p> </div> </div> </div> ))} 
·
Juan Pablo Isaza
1 answers
Answer question0
Necesita otro estado de matriz para almacenar las imágenes descargadas. Llame a downloadImg para todos los elementos dataFetch en el montaje y solo intente representar la imagen después de que el mismo índice en la matriz de imágenes no esté indefinido. Algo del estilo de:
// Better designed download function that resolves with the downloaded data: function downloadImage(path) { return supabase.storage .from("public/job-photo") .download(`jobphotos/${path}.jpg`) .then(({ data, error }) => { if (error) throw error; return URL.createObjectURL(data); }); } const [urls, setUrls] = useState(() => dataFetch.map(() => null)); // Fetch all URLS when the component mounts: useEffect(() => { dataFetch.forEach((item, i) => { downloadImage(item.genid).then((url) => { setUrls(urls => urls.map((prev, j) => j === i ? url : prev); }); // .catch(handleError); }); }, []); // Render them once they exist: dataFetch.map((item, i) => ( <div key={item.genid} className="flex flex-col rounded-lg shadow-lg overflow-hidden" > { urls[i] ? <img src={urls[i] /} : null }
·
Juan Pablo Isaza
Report
Answer question