GraphQL 默认数据导致 useEffect 中的无限循环

Question

所以我有这个代码

const [localState, setLocalState] = useState<StateType[]>([]);
const { data = { attribute: [] }, loading } = useQuery<DataType>(QUERY, {
  variables: {
    id: client && client.id
  },
  skip: user.clients && user.clients.length === 0
});

useEffect(() => {
  if (loading || !data) {
    return undefined;
  }

  if (data && data.attribute) {
    const sortedResult = data.attribute.sort((a, b) =>
      a.updatedAt < b.updatedAt ? 1 : -1
    );
    setLocalState(sortedResult);
  }
}, [data]);

问题是当 useQuery 返回 empty(undefined) 结果并且数据默认为 {attribute: []} useEffect 会一直被触发，但是当 useQuery 返回数据时（所以它不是默认的）useEffects 只被输入一次。这个问题的解决方案只是删除查询中的默认参数= {attribute: []}，所以它看起来像这样：

const [localState, setLocalState] = useState<StateType[]>([]);
const { data, loading } = useQuery<DataType>(QUERY, {
  variables: {
    id: client && client.id
  },
  skip: user.clients && user.clients.length === 0
});

useEffect(() => {
  if (loading || !data) {
    return undefined;
  }

  if (data && data.attribute) {
    const sortedResult = data.attribute.sort((a, b) =>
      a.updatedAt < b.updatedAt ? 1 : -1
    );
    setLocalState(sortedResult);
  }
}, [data]);

为什么 useQuery 中的默认参数会使 useEffect 被无限触发？

（要补充的重要说明 - 我试图删除排序功能，认为它会改变数据对象并导致重新输入，但它没有改变任何东西）

Answer 1

const { data = { attribute: [] }, loading } = useQuery<DataType>(QUERY, {

这个声明没有更大的意义：

• 不需要，因为所有渲染[和计算]都应该（并且已经）被data首先检查阻止；
• 更深的嵌套值怎么办？下一个空声明？它会导致死胡同；

它可以在每次渲染时创建一个新的data 对象......但它不应该导致无限重新渲染......还有其他原因吗？

您可以通过以下方式打破效果循环：

const [localState, setLocalState] = useState(null);

useEffect(() => {
  if (data && data.attribute && !localState) {

你也可以在钩子中使用onCompleted事件：

const { loading } = useQuery<DataType>(QUERY, {
  variables: {
    id: client && client.id
  },
  skip: user.clients && user.clients.length === 0
  onCompleted: (data) => {
    if(data && data.attribute) {
      const sortedResult = data.attribute.sort((a, b) =>
        a.updatedAt < b.updatedAt ? 1 : -1
      );
      setLocalState(sortedResult);
    }
  }
});

...检查/使用loading和{localState && <SomeResultView data={localState} />}

Answer 2

您的 data 在每次渲染时都是一个新对象，因此重新触发您的 useEffect 重新触发渲染等等。

我认为您在这里不需要useEffect：

    const { data, loading } = useQuery<
        DataType
    >(QUERY, {
        variables: {
            id: (client && client.id)
        },
        skip: user.clients && user.clients.length === 0
    });

    const localState = (!loading && data && data.attribute)
        ? undefined
        : data.attribute.sort(
              (a, b) => (a.updatedAt < b.updatedAt ? 1 : -1)
          );

应该够了