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

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

使用一个类组件，我会使用ComponentWillUnmount，我认为这会很好地工作。现在我正在使用一个功能组件，我需要使用一个useEffect挂钩，它有一个调用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的正确方法是什么，以便在卸载组件时只清理一次？我发现了这一点，但对解决方案不太满意，并认为一定有更好的方法

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

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

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

---

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

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

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

---

复制品？嗨@AnthumChris，这个问题是关于组件安装的。我正在寻找有关组件卸载的解决方案。Bhaskar Gyan Vardhan对该SO问题的第一个答案也试图回答如何使用挂钩进行卸载，但是该示例在卸载时没有使用任何组件道具。我的问题是，要访问useEffect钩子中的道具，我需要添加一个依赖项，这意味着每当依赖项发生变化时，清理功能都会运行，我只希望它在卸载时运行一次。这个答案还应该提供一些

组件将卸载的示例。你没看见他们吗？@simondefreeze你找到解决这个问题的办法了吗？我想做完全相同的事情，但也不知道如何正确调用URL.revokeObjectURL（URL），使用我在组件状态下拥有的URL。Hi@drazewski不幸的是，我还没有找到解决方案。我不确定我在这里遗漏了什么，我很惊讶没有更多的人报道这一点。这是第22条军规-如果不将附件包括在dependencies数组中，则卸载时将不会有最新的附件列表，但将其添加到dependency数组意味着它将在每次更新附件数组时运行代码。是否重复？嗨@AnthumChris，这个问题是关于组件安装的。我正在寻找有关组件卸载的解决方案。Bhaskar Gyan Vardhan对该SO问题的第一个答案也试图回答如何使用挂钩进行卸载，但是该示例在卸载时没有使用任何组件道具。我的问题是，要访问useEffect钩子中的道具，我需要添加一个依赖项，这意味着每当依赖项发生变化时，清理功能都会运行，我只希望它在卸载时运行一次。这个答案还应该提供一些
组件将卸载的示例。你没看见他们吗？@simondefreeze你找到解决这个问题的办法了吗？我想做完全相同的事情，但也不知道如何正确调用URL.revokeObjectURL（URL），使用我在组件状态下拥有的URL。Hi@drazewski不幸的是，我还没有找到解决方案。我不确定我在这里遗漏了什么，我很惊讶没有更多的人报道这一点。这是一个第二十二条军规的情况-如果您不在dependencies数组中包含附件，卸载时它将不会有最新的附件列表，但将其添加到dependency数组意味着它将在每次更新附件数组时运行代码。啊，非常聪明，我会这样做：）我仍然希望React有一个更优雅的方式来做这件事，我很惊讶更多的人对此没有问题。啊，非常聪明，我会这样做：）我仍然希望React有一个更优雅的方式来做这件事，我很惊讶更多的人对此没有问题。