React apollo 客户端：警告：无法对未安装的组件执行 React 状态更新

Question

我在我的反应项目中使用反应路由器和阿波罗客户端（v 3.0）。我有一个嵌套的路由，假设A -> B我使用useQuery钩子通过 graphql 查询获取不同的数据集，假设分别是QA和QB。在B我通过 WS 收到一条关于来自 的新数据的新消息QB，所以我通过client.writeQueryfor更新了 apollo 存储缓存QB，但是这段数据还包含一个请求 in 的嵌套实体QA，所以这个缓存更新不仅触发了组件的重新渲染useQuery钩子QB但也QA，产生以下警告：

警告：无法对卸载的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。

要修复，请取消 useEffect 清理函数中的所有订阅和异步任务。

我在B组件中添加了以下调试：

console.log('WRITE');
client.writeQuery(...)

和A组件：

useEffect(() => {
  console.log('MOUNT');
  return () => {
    console.log('UNMOUNT');
  };
}, []);

并得到：

WRITE
UNMOUNT
MOUNT

因此，A在我通过client.writeQuery.

为什么会发生这种情况以及如何解决？

Answer 1

您可以安全地忽略此警告，它已在 React 18 中删除。

https://github.com/reactwg/react-18/discussions/82