useQuery onCompleted 后更新状态...错误

Question

我正在使用 react hooks 和 apollo client 3

构建应用

正在尝试更新状态 useQuery 完成

这是代码

const GET_POST_BY_ID_QUERY = gql`
  query getPostById($postId: ID!) {
    getPostById(postId: $postId) {
      id
      title
      body
    }
  }
`;

const [{ title, body }, setPost] = useState({ title: '', body: '' });

useQuery(GET_POST_BY_ID_QUERY, {
    variables: { postId: route?.params?.postId },
    skip: !route.params,
    onCompleted: data => {
      console.log('data', data.getPostById);
      setPost(data.getPostById);
    },
    onError: err => {
      console.log(err);
    }
  });

它一直给我这个错误

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 %s.%s, a useEffect cleanup function

我根本没有在此屏幕中使用 useEffect。

有什么问题吗？

Answer 1

React 警告您您正在尝试更新不再存在的有状态变量。可能发生的情况是，您的组件在您的查询开始执行之后但在它实际完成之前被卸载。您可以通过在 onCompleted 处理程序中添加 if(mounted) 语句来解决此问题，以在尝试更新其状态之前检查组件是否仍然存在。

但是，我建议您放弃 onCompleted 和 onError 回调并选择 use variables as returned by the useQuery hook。您的代码将如下所示：

const { data, loading, error } = useQuery(GET_POST_BY_ID_QUERY, {
    variables: { postId: route?.params?.postId },
    skip: !route.params
})

if (loading) return 'Loading...';
if (error) return `Error! ${error.message}`;

return (
  <div>
    <p>{data.getPostById.title}</p>
    <p>{data.getPostById.body}</p>
  </div>
)

The new approach with hooks 允许您简化代码并处理组件的生命周期，而无需将一堆事件处理程序连接在一起。这样你就可以完全避免许多状态问题。

useQuery onCompleted 后更新状态...错误

update state after useQuery onCompleted... Error

apollo

react-native

react-apollo

apollo-client

use-state