useLazyQuery - 再渲染问题

Question

需求：我想先在useEffect中自动调用查询，然后在函数中手动调用。

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

问题：我想在useEffect中自动调用第1次查询，然后在函数中手动调用。Invarient Violation: 太多的重新渲染。

 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 我猜想，是使用Effect导致了这个问题。

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 )}