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

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

尝试使用

refetch

。像这样的东西：

const { data, refetch } = useQuery(MY_QUERY);

useEffect(() => {
  refetch();
}, id);

您可以在任何地方使用

refetch

，在

useEffect

中或单击按钮

onclick

处理程序。

或者，如果您不希望它第一次运行，您可以使用

useLazyQuery

：

const [goFetch, { data }] = useLazyQuery(MY_QUERY);

现在您可以使用

goFetch

或任何您喜欢的名称。

您的整个示例可能如下所示：

import React, { useEffect, useState, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import { GET_MORTGAGE_JOURNEY } from "../../../../Graphql/Journeys/query";

export default function index() {
  const insuranceId = useSelector((state) => state.mortgage.insuranceId);
  const { loading, error, data, refetch } = useQuery(GET_MORTGAGE_JOURNEY, {
    variables: { id: insuranceId },
  });

  useEffect(() => {
    if (insuranceId) {
      refetch({id: insuranceId});
    }
  }, [insuranceId]);


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

Answer 2

当您从

React

组件顶层以外的任何位置调用它时，您就违反了钩子规则。

useEffect

接受一个回调函数，你可以从中调用你的钩子。这是一个问题。

我在 skip

 中找到了这个 

useQuery 选项，它可以帮助您有条件地呼叫

useQuery

。

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

任何时候

insuranceId

更改您的回调运行，因此它会在挂载一次后运行，然后在后续更改时运行。