useLazyQuery - 重新渲染问题

【问题标题】：useLazyQuery - Re-Rendering IssueuseLazyQuery - 重新渲染问题
【发布时间】：2020-08-06 00:14:03
【问题描述】：

要求：

我想在 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 导致了这个问题，我假设。

【问题讨论】：

标签： javascript react-native graphql apollo apollo-client

【解决方案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 )}

【讨论】：