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([]);
}

卸装时如何使用React挂钩整理功能组件（使用整理状态中的值）

1 个答案: