javascript - useLazyQuery - 重新渲染问题

Question

要求:

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

Issue: Invarient Violation: Too many re-renders.

 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 Hook )来阻止意外行为。

只是不要将 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 )}