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

【问题标题】：Invalid hook call. Hooks can only be called inside of the body of a function component when i call useQuery in useEffect无效的挂钩调用。当我在 useEffect 中调用 useQuery 时，只能在函数组件的主体内部调用钩子
【发布时间】：2021-10-02 02:27:53
【问题描述】：

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

谢谢！

【问题讨论】：

这是一个函数 function getMortgageData(insuranceId) 。你不能在里面调用钩子。你也不能从 useEffect 内部调用一个钩子，因为它本身就是一个回调函数。你想达到什么目标。
最初“insuranceId”变量为空/未定义我想从我的reducer中选择一个状态，将其设置为“inusranceId”，然后调用apollo-query
@TusharShahi 所以基本上使用“insuranceId”在装载时调用 GET_DATA 查询来获取我的数据
当然，我想我的回答会对你有所帮助。看看，让我知道

标签： reactjs react-hooks apollo react-apollo react-apollo-hooks

【解决方案1】：

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

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

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

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

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

【讨论】：