AltaiR-05
@AltaiR-05

Почему не работает URL.revokeObjectURL?

Всем привет. Делаю модалку для картинок. При получении файла с 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>
  );
};
  • Вопрос задан
  • 31 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы