无效的钩子调用。当我在useEffect中调用useQuery时，只能在函数组件的主体内部调用挂钩

Question

我在我的react项目中使用apollo graphql，我得到的错误是

无效的钩子调用。钩子只能在函数组件的主体内部调用

这是我的代码

import React, { useEffect, useState, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";

// **************** COMPONENTS ****************
import { GET_MORTGAGE_JOURNEY } from "../../../../Graphql/Journeys/query";

export default function index() {
  const insuranceId = useSelector((state) => state.mortgage.insuranceId);

  // Panels Heading to show on all panels

  useEffect(() => {
    if (insuranceId) {
      getMortgageData(insuranceId);
    }
  }, [insuranceId]);

  function getMortgageData(insuranceId) {
    const { loading, error, data } = useQuery(GET_MORTGAGE_JOURNEY, {
      variables: { id: insuranceId },
    });
    console.log(data);
  }

  return <section className="mortage-journey"></section>;
}

一旦我运行了这个程序，我就得到了错误，我知道useQuery本身就是一个钩子，我不能从内部useEffect调用它，但是接下来应该怎么解决这个问题，因为我需要首先从我的redux状态中获取insuranceId并将其发送到查询。

谢谢

Answer 1

当您从React组件的顶层以外的任何地方调用它时，您都违反了钩子规则。

使用一个回调函数，并从该函数调用钩子。这是个问题。

我在useQuery中找到了这个skip选项，它帮助您有条件地调用useQuery。

 useEffect(() => {
    const { loading, error, data } = 
    useQuery(GET_MORTGAGE_JOURNEY, {
      variables: { id: insuranceId },
      skip : (!insuranceId)
    });
  }, [insuranceId]);

每当fianceId更改时，回调都会运行，因此它会在挂载后运行一次，然后在后续更改上运行。