Reactjs Can'；t在未安装的组件上执行React状态更新。无状态

让我们先假设一下，我知道错误的含义以及通常是什么时候产生的，但现在我不知道我会抱怨什么

错误来自此简单组件：

export interface PostHandlerOutProps {
  posts: PostFragment[];
}

export interface PostHandlerProps {
  children: (outProps: PostHandlerOutProps) => ReactNode;
  initialPosts?: PostHandlerOutProps['posts'];
}

const PostsHandler: FC<PostHandlerProps> = ({ children, initialPosts = [] }) => {
  const { data } = useQuery<PostsQuery, PostsQueryVariables>(postsQuery);

  return <>{children({ posts: data?.posts || initialPosts })}</>;
};

有人知道这里发生了什么吗？这是我应该关心的事情吗

---

只是为了解释。我需要这种架构，因为initialPosts来自服务器端渲染，我需要在客户端对相同的数据进行替换，但来自useQuery，因为它使我能够对突变的apollo缓存更新做出反应。

好的，似乎我成功地识别了apollo hook

useQuery

的问题。自2019年以来，开发者们一直在抱怨这个问题，现在看来阿波罗团队最终会解决这个问题。根据这篇文章：-

---

他们将使警告保持沉默。阿波罗队太棒了

这意味着

PostsHandler.tsx

已卸载，可能您正在该组件中使用状态否，您可以看到

PostsHandler.tsx

中没有状态。只有hook

useQuery

export interface PostsProps {
  initialPosts: PostFragment[];
}

const Posts: FC<PostsProps> = ({ initialPosts }) => {
  return (
      <PostsHandler initialPosts={initialPosts}>
        {({ posts }) => (
          <div>For simplicity sake nothing but I am still getting the error.</div>
        )}
      </PostsHandler>
  );
};

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at PostsHandler (webpack-internal:///./src/components/post/PostsHandler.tsx:20:3)
    at Posts (webpack-internal:///./src/views/admin/Posts.tsx:18:3)