Bien, estoy creando un blog personal y quiero que sea fácil para mí cargar archivos en el servidor y luego recuperarlos para mis publicaciones cuando escribo, con ese fin estoy tratando de crear más o menos un explorador de archivos simple que vuelca todos los archivos cargados en un div, envolviéndolos en la etiqueta adecuada (img, audio, video, etc.), por lo que mi solución es crear una función que recupere un blob de una URL, determine el tipo mime y luego establezca el html elemento que devuelve basado en ese tipo:
const Media = ({ src = '' }) => { let [ elem, setElem ] = useState(<div/>); axios.get( `/static/uploads/${ src }`, { responseType: 'blob' } ).then(blob => { const type = blob.data.type.split('/')[0]; switch (type) { case 'image': setElem(<img src={ URL.createObjectURL(blob.data) }/>); break; } }); return elem; };desafortunadamente, no se muestra nada en mi explorador (o más bien en el vertedero):
<div className='gallery'> { files.map(name => (<Media src={ name }/>)) } </div>esto recupera los nombres de archivo:
axios.get('/api/upload').then(uploads => { setFiles(uploads.data.files); });... y congela mi computadora portátil (bastante vieja) después de un tiempo para arrancar. ¿Qué estoy haciendo mal?
Entonces, finalmente encontré la solución... y me avergüenza decir que es bastante trivial debido a un error de novato. El código que administra el estado debe ser asíncrono y debe ser manejado por useEffect debido a que se ejecuta en el ciclo de procesamiento; de lo contrario, eventualmente se bloquea (además de bloquear cosas como la interacción del usuario debido a que la página se procesa constantemente):
const Media = ({ src = '' }) => { const [ elem, setElem ] = useState(<div/>); useEffect(async () => { const blob = await axios.get( `/static/uploads/${ src }`, { responseType: 'blob' }); const type = blob.data.type.split('/')[0]; switch (type) { case 'image': setElem(<img src={ URL.createObjectURL(blob.data) }/>); break; } }, []); return elem; }; useEffect(async() => { const uploads = await axios.get('/api/upload'); setFiles(uploads.data.files); }, []);... si ya