挂钩调用无效。当我在 useEffect 中调用 useQuery 时,只能在函数组件的主体内部调用挂钩
Invalid hook call. Hooks can only be called inside of the body of a function component when i call useQuery in useEffect
我在我的 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 状态,然后将其发送到查询。
谢谢!
当您从 React
组件顶层以外的任何地方调用它时,您就违反了钩子规则。
useEffect
接受一个回调函数,你正在从中调用你的钩子。是个问题。
我在 useQuery
中找到了这个 skip
选项,它可以帮助您有条件地调用 useQuery
。
useEffect(() => {
const { loading, error, data } =
useQuery(GET_MORTGAGE_JOURNEY, {
variables: { id: insuranceId },
skip : (!insuranceId)
});
}, [insuranceId]);
任何时候 insuranceId
更改您的回调 运行s,因此它是 运行 在挂载一次之后然后在后续更改。
我在我的 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 状态,然后将其发送到查询。
谢谢!
当您从 React
组件顶层以外的任何地方调用它时,您就违反了钩子规则。
useEffect
接受一个回调函数,你正在从中调用你的钩子。是个问题。
我在 useQuery
中找到了这个 skip
选项,它可以帮助您有条件地调用 useQuery
。
useEffect(() => {
const { loading, error, data } =
useQuery(GET_MORTGAGE_JOURNEY, {
variables: { id: insuranceId },
skip : (!insuranceId)
});
}, [insuranceId]);
任何时候 insuranceId
更改您的回调 运行s,因此它是 运行 在挂载一次之后然后在后续更改。