如何解决无效的钩子调用当我在 useEffect 中调用 useQuery 时,只能在函数组件的主体内部调用钩子
我在我的 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 并发送它到查询。
谢谢!
解决方法
当您从 React
组件的顶层以外的任何地方调用它时,您都违反了钩子规则。
useEffect
接受一个回调函数,您正在从中调用您的钩子。这是一个问题。
我在 useQuery
中发现了这个 skip
选项,它可以帮助您有条件地调用 useQuery
。
useEffect(() => {
const { loading,error,data } =
useQuery(GET_MORTGAGE_JOURNEY,{
variables: { id: insuranceId },skip : (!insuranceId)
});
},[insuranceId]);
任何时候 insuranceId
更改您的回调运行,因此它会在安装后运行一次,然后在后续更改时运行。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。