React - 即使组件已卸载，我也需要执行异步状态更新和 useEffect

Question

简介

注意：在这个项目中，我们没有使用 Redux。

1. 我有一个堆栈配置文件屏幕，上面有一个简单的“关注用户”按钮和一个计数器“关注者”。

2. 用户可以导航到此堆栈配置文件屏幕，并随时关闭它。

3. 如果用户按下“关注”按钮：

   3.1 按钮将连接到我的服务器，以运行“关注用户”的逻辑

   3.2 然后，当此操作完成后，为了重新渲染屏幕（其他用户的关注者计数器），我正在更新其他用户的数据（个人资料屏幕的状态），增加他的关注者计数器。

   3.3 当此状态更新时，useEffect 将运行并将新的其他用户数据添加到我在上下文中拥有的地图中（我将用户“存储”在visitedUsers 地图中，以避免请求数据库每次访问我最近访问过的用户的个人资料时，并在应用程序的不同选项卡（某种非持久性本地内存和状态管理器）中保存同一用户的多个个人资料屏幕之间的正确数据。

问题

步骤 3.1、3.2 和 3.3 必须始终运行，以确保应用数据的一致性。但是...用户可以在异步作业期间关闭屏幕...因此，步骤 3.2 和 3.3 可能不会运行。

这是一个显示问题的图表：

如您所见，如果卸载配置文件屏幕，则 setState 和 useEffect（更新上下文）将不会运行并可能导致内存泄漏。

我该如何解决这个问题？？

我想做什么：

“isMounted”反模式不是一个好的选择，因为步骤 3.2 和 3.3 总是必须运行。

似乎我需要将这个逻辑向上移动到组件层次结构中（我曾想过这样做，但看起来很奇怪）......这是唯一的方法吗？

有什么想法吗？

Answer 1

我曾经遇到过类似的问题。我试图开始上传，但允许用户在上传运行时离开组件。我的解决方案有点迂回，但是，它奏效了。

所以我所做的是将上传功能移动到根组件（App.js，而不是 index.js！），而不是使用 Redux，我使用了 ContextAPI 并设置了一个 useEffect 钩子来监听存储数据的变化并且，每次数据更改时，它都会使用它找到的新数据触发上传功能。这样，实际上传不会由它发起的组件处理，用户可以自由导航到其他地方而不会中断上传。中断它的唯一方法是关闭应用程序。