Всем привет. Делаю модалку для картинок. При получении файла с API я с помощью
URL.createObjectURL создаю ссылку на него. В документации прочитал, что эти ссылки занимают память и для каждого из них нужно освобождать эту память с помощью
URL.revokeObjectURL. В моей реализации это почему-то не работает. Если вызвать этот метод где я закомментировал это работает а вот когда вызываю где закрываю модалку то уже нет.
const FilePreviewModal = ({ item }) => {
const [isModalOpen, setIsModalOpen] = React.useState(false);
const [previewLink, setPreviewLink] = React.useState('');
const dispatch = useDispatch();
const openModal = React.useCallback(() => setIsModalOpen(true), []);
const closeModal = () => {
setIsModalOpen(false);
// Здесь не работает
URL.revokeObjectURL(previewLink);
};
const { loading, error } = useSelector(({ files }) => files);
React.useEffect(() => {
if (item) {
dispatch(getFile(item.id)).then(({ file }) => {
const link = URL.createObjectURL(file);
// Здесь если вызвать работает
// URL.revokeObjectURL(link);
setPreviewLink(link);
});
}
openModal();
}, [item, openModal, dispatch]);
return (
<Modal show={isModalOpen} onHide={closeModal} size="xl">
<Modal.Header closeButton>
<Modal.Title>{item.name}</Modal.Title>
</Modal.Header>
<Modal.Body>
{loading && <LoadingIndicator />}
{error && <ErrorIndicator error={error} />}
{previewLink && <Image src={previewLink} alt={item.name} fluid />}
</Modal.Body>
</Modal>
);
};