React：制作文件查看器时遇到问题

Question

好的，所以我正在创建一个个人博客，并希望我可以轻松地将文件上传到服务器，然后在撰写文章时检索它们以用于我的帖子，为此，我正在或多或少地尝试创建一个简单的文件浏览器，将所有上传的文件转储到 div 中，将它们包装在适当的标签（img、音频、视频等）中，所以我的解决方案是创建一个从 [=24= 中检索 blob 的函数=]，确定 mime 类型，然后根据该类型将 html 元素设置为 returns：

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);
});

... 启动一段时间后它冻结了我的（相当旧的）笔记本电脑。我做错了什么？

Answer 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);
}, []);

...你是

React：制作文件查看器时遇到问题

React: having trouble making file viewer

javascript

blob

reactjs