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

问题描述

我在我的 React 项目中使用了 apollo-graphql，但出现错误

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

这是我的代码

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 并发送它到查询。

谢谢！

解决方法

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

useEffect 接受一个回调函数，您正在从中调用您的钩子。这是一个问题。

我在 useQuery 中发现了这个 skip 选项，它可以帮助您有条件地调用 useQuery。

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

任何时候 insuranceId 更改您的回调运行，因此它会在安装后运行一次，然后在后续更改时运行。