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

Question

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

的错误

Invalid hook call. Hooks can only be called inside of the body of a function component

这是我的代码

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 内部调用它，但是解决方法应该是什么，因为我需要我的 insuranceId首先是 redux 状态，然后将其发送到查询。

谢谢！

Answer 1

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

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

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

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

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

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

Invalid hook call. Hooks can only be called inside of the body of a function component when i call useQuery in useEffect

reactjs

react-hooks

apollo

react-apollo

react-apollo-hooks