时间戳

首页 > 解决方案 > 卸载时如何使用反应挂钩来整理功能组件（使用整理中的状态值）

reactjs - 卸载时如何使用反应挂钩来整理功能组件（使用整理中的状态值）

问题描述

我有一个功能组件，可以将文件保存到云存储并将对这些文件的引用保存到数据库。文件一被选中就会被推送到云端（出于 UX 原因）。但是 db 对象（引用文件的 URL）在用户单击保存之前不会保存。如果用户选择了一些文件，但在单击保存之前改变了主意，我想在组件卸载时删除这些文件。

我正在努力用useStateand来实现这一点useEffect。

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

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

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

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

在这种情况下，files变量 inuseEffect是初始化值[]。

如果我将files变量传递给useEffect

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

files然后，每当更新变量时，都会删除该文件。

这不可能是一个不常见的模式。我正在使用 state 中的值在卸载组件时对其进行整理。

正确的方法是什么？

标签： reactjsreact-hooks

解决方案

您可以使用 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([]);
}

推荐阅读