访问ComponentWillUnmount中的道具时使用react挂钩

Question

我正在实现一个附件组件，并试图通过调用URL成为一个好公民。在卸载我的组件以清理本地blob资源时，revokeObjectURL（）。

使用一个类组件，我会使用ComponentWillUnmount，我认为这会很好地工作。现在我正在使用一个功能组件，我需要使用一个useffect钩子，它有一个调用URL的清理函数。revokeObjectUrl方法。这是我的第一个方法

 useEffect(() => {
    return () => {
      attachments &&
        attachments.forEach((a) => {
          console.log('cleaning', a.uri);
          URL.revokeObjectURL(a.uri);
        });
    };
  });

但是附件道具是未定义的；我读过这是因为它的值是从组件第一次呈现时开始设置的。所以我试着把道具添加到依赖关系数组中

 useEffect(() => {
    return () => {
      attachments &&
        attachments.forEach((a) => {
          console.log('cleaning', a.uri);
          URL.revokeObjectURL(a.uri);
        });
    };
  }, [attachments]);

但当附件对象更新时，每当上传新附件时，它就会运行清理代码。

实现useEffect的正确方法是什么，以便在卸载组件时只清理一次？我觉得这篇文章很好，但对解决方案不太满意，认为一定有更好的方法

Answer 1

这可能有助于：

  const {getRootProps, getInputProps} = useDropzone({
    accept: 'image/*',
    onDrop: acceptedFiles => {
      setFiles(acceptedFiles.map(file => Object.assign(file, {
        preview: URL.createObjectURL(file)
      })));
    }
  });
  
  const thumbs = files.map(file => (
    <div style={thumb} key={file.name}>
      <div style={thumbInner}>
        <img
          src={file.preview}
          style={img}
        />
      </div>
    </div>
  ));

  useEffect(() => () => {
    // Make sure to revoke the data uris to avoid memory leaks
    files.forEach(file => URL.revokeObjectURL(file.preview));
  }, [files]);

从…起https://react-dropzone.js.org/#section-预演

Answer 2

我遇到了同样的问题，并找到了一种适合我的方法。

我使用Ref来存储blob，而不是State。我只是在卸载组件时清理useEffect中的Ref。

  React.useEffect(() => {
    return () => {
      // Cleanup blobs when component unmount
      ref.current.map((file) => URL.revokeObjectURL(file));
    };
  }, []);