предварительный просмотр загрузки изображения: window.URL.createObjectURL() работает только один раз

Question

У меня есть загрузчик изображений, созданный с нуля в приложении React. Предварительный просмотр изображения - сделанный благодаря window.URL.createObjectURL() - работает только в первый раз. Я думал, что это из-за проблемы с памятью, поэтому я добавил window.URL.revokeObjectURL() перед каждым изменением изображения. Это все еще не работает.

Я слышал об API MediaSource(), но не нашел примеров для изображений. Что не так с этим кодом?

         export default function ImageUploader({id, onAdd, onRemove}) {
  const [preview, setPreview] = useState(null);

  const onAddImage = (file: File) => {
    window.URL.revokeObjectURL(preview);
    setPreview(window.URL.createObjectURL(file));
    onAdd(id, file);
  };
  const onRemoveImage = () => {
    window.URL.revokeObjectURL(preview);
    setPreview(null);
    onRemove(id);
  };

  return (
    <div>
      {preview ? <Preview src={preview} alt={id} /> : 
       <Icon icon="upload" />
      }
      <input
        type="file"
        accept="image/png, image/jpeg"
        onChange={(e) => onAddImage(e.target.files[0])}
      />
    </div>
  );
}

Answer 1

Входное значение не меняется, поэтому функция onChange не запускается. Вы можете использовать реакцию useRef перехватывает api и назначается тегу ввода и очищает значение ввода внутри onRemoveImage функция.