useLazyQuery-重新呈现问题

Question

要求：

我想在useEffect中第一次自动调用查询，然后在函数中手动调用。

问题：永久违反：重新提交过多。

 const [getComment, { loading, data }] = useLazyQuery(getCommentsQuery);
  useEffect(() => {
    getComment({
      variables: {
        input: {
          id: "5e5cb512e90bd40017385305",
        },
      },
    });
  }, []);

  if (data && data.getPost) {
    var allNewComments = data.getPost.comments;
    setAllComments(allNewComments);  // re-renders
  }

我假设

setState导致了此问题。

Answer 1

功能组件的“主体部分”会在每次更改时运行，需要条件（或useEffect钩子）来阻止意外行为。

仅将useState用于allComments？您可以使用f.e。

const allNewComments = (data && data.getPost) ? data.getPost.comments : [];

...如果要遍历allNewComments

如果您仍然想使用useState（与useLazyQuery结合使用），请在onCompleted选项/处理程序中使用它，例如：

const [getComment, { loading, data }] = useLazyQuery(getCommentsQuery, {
  variables: {
    input: {
      id: "5e5cb512e90bd40017385305",
    },
  },
  onCompleted: (data) => {setAllNewComments( data.getPost.comments )}