4

我在我的反应项目中使用 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 并将它发送到查询.

谢谢 ！

4

1 回答 1

0

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

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

我发现这个skip选项useQuery可以帮助你useQuery有条件地调用。

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

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

于 2021-07-26T06:01:31.930 回答