Question

我创建了一个应用程序，您可以在其中添加带有阿波罗查询的帖子，并且效果很好，但是我有这个警告：

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.
    in ChangeNews (at AdminRoute.js:112)
    in component (created by Context.Consumer)

这是admin Route最重要的代码片段：

AdminRoute的第112行是带有路线的

export const AdminRoute = ({ component: Component, ...rest }) => {

//some code...

return(
<div className="container">
//some code ...

     <Route {...rest} component={(props) => (
          <Component {...props} data={data} refetchLogout={refetchLogout} />  
      )}
</div>
);

更改新闻部分：

import React, { useEffect } from 'react';
import { ChangeItem } from './ChangeItem';
import { usePostsQuery } from '../../../generated/graphql'

export const ChangeNews = () => {

  const { data, refetch: refetchPosts } = usePostsQuery();

  if(!data){
        return <div>loading...</div>
    }

  const cardList = data.posts.map( posts => (
          <ChangeItem key={ posts._id } posts={posts} refetchPosts={refetchPosts}/>
      ));

  return (
      <div>{cardList}</div>
  );
}

我已经阅读了一些解决方案，其中大多数都不起作用。问题是：

警告是否有问题？
如果有问题，会因此发生什么事？
如何解决这个问题？

使用阿波罗查询时的警告

0 个答案: