Реагировать: возникли проблемы с созданием средства просмотра файлов
Итак, я создаю личный блог и хочу, чтобы мне было легко загружать файлы на сервер, а затем извлекать их для моих сообщений при написании, с этой целью я пытаюсь более или менее создать простой файловый менеджер, который сбрасывает все загруженные файлы в div, оборачивая их в соответствующий тег (img, аудио, видео и т. д.), поэтому мое решение состоит в том, чтобы создать функцию, которая извлекает BLOB-объект из URL-адреса, определяет тип mime, а затем устанавливает html элемент, который он возвращает на основе этого типа:
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;
};
к сожалению, в моем проводнике ничего не отображается (точнее, свалка):
<div className='gallery'>
{ files.map(name => (<Media src = { name }/>)) }
</div>
это извлекает имена файлов:
axios.get('/api/upload').then(uploads =>
{
setFiles(uploads.data.files);
});
... и через некоторое время мой (довольно старый) ноутбук зависает при загрузке. Что я делаю не так?
... Я рассматривал эту возможность, я новичок в React. Мне нужен какой-то способ асинхронно обновить элемент после загрузки большого двоичного объекта, и я не уверен, как лучше всего это сделать или где разместить состояние
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Итак, я наконец нашел решение... и мне стыдно признаться, что оно довольно тривиальное из-за ошибки новичка. Код, управляющий состоянием, должен быть асинхронным и обрабатываться useEffect из-за того, что он запускается в цикле рендеринга, иначе он в конечном итоге выйдет из строя (а также заблокирует такие вещи, как взаимодействие с пользователем из-за постоянного рендеринга страницы):
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);
}, []);
... да
Если можно, почему вы используете состояние использования в своем медиа-компоненте? Возможно, поэтому ваша система зависает. Возможно, ваше состояние постоянно обновляется, вызывая бесконечный цикл.