Как мне использовать реагирующие хуки, чтобы привести в порядок функциональный компонент, когда он размонтируется (используя значения из состояния в приборе)

Question

У меня есть функциональный компонент, который сохраняет файлы в облачном хранилище и сохраняет ссылку на эти файлы в БД. Файлы отправляются в облако, как только они выбраны (по причинам UX). Но объект db (ссылающийся на URL-адрес файлов) не сохраняется до тех пор, пока пользователь не нажмет сохранить. Если пользователь выбирает некоторые файлы, но затем перед выбором нажимает кнопку «Сохранить», я хочу удалить файлы, когда компонент размонтируется.

Я изо всех сил пытаюсь выполнить это с useState и useEffect.

const [ files, setFiles] = useState([]);

const onFileAdded = fileURL => {
  setFiles([ ...files, fileURL ])
}

useEffect(() => {
  return () => {
    files.forEach(f => storageAPI.removeFile(f));
  }
}, []);

const onSave = () => {
  setFiles([]);
}

В этом сценарии переменная files в useEffect является инициализированным значением [].

, если я передам переменную files в useEffect

useEffect(() => {
  return () => {
    files.forEach(f => storageAPI.removeFile(f));
  }
}, [files]);

Затем файл удаляется при каждом обновлении переменной files.

Это не может быть необычным паттерном. Я убираю компонент, когда он размонтирован, используя значения из состояния.

Как правильно это сделать?

Answer 1

Вы можете использовать useRef ().

const [ files, setFiles] = useState([]);
const filesRef = useRef(files);


const onFileAdded = fileURL => {
  setFiles([ ...files, fileURL ])
}

useEffect(() => {
  filesRef.current = files;
}, [files]);


useEffect(() => {
  return () => {
    filesRef.current.forEach(f => storageAPI.removeFile(f));
  }
}, []);

const onSave = () => {
  setFiles([]);
}