Блог

Главная - Вопросы по программированию - Неверный вызов крючка. Крючки можно вызывать только внутри тела компонента функции, когда я вызываю useQuery в useEffect

Неверный вызов крючка. Крючки можно вызывать только внутри тела компонента функции, когда я вызываю useQuery в useEffect

#reactjs #react-hooks #apollo #react-apollo #react-apollo-hooks

Вопрос:

Я использую apollo-graphql в своем проекте react, и я получаю ошибку

Неверный вызов крючка. Крючки могут вызываться только внутри тела компонента функции

Вот мой код для этого

 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 из моего состояния восстановления и отправить его в запрос.

Спасибо!

Комментарии:

1. Это функция function getMortgageData(insuranceId) . Вы не можете вызвать крюк внутри него. Вы также не можете вызвать хук изнутри useEffect, так как он сам по себе является функцией обратного вызова. Чего вы хотите достичь.

2. изначально переменная «insuranceId» равна нулю/не определена , я хочу выбрать состояние из своего редуктора, установить его в «inusranceId», а затем вызвать apollo-запрос

3. @TusharShahi поэтому в основном вызываю запрос GET_DATA при монтировании с помощью «insuranceId», чтобы получить мои данные

4. Конечно, я думаю, что мой ответ вам поможет. Взгляните и дайте мне знать

Ответ №1:

Вы нарушаете правило крючков, когда вызываете его из любого места, кроме верхнего уровня React компонента.

useEffect принимает функцию обратного вызова, и вы вызываете свой хук из нее. Это проблема.

Я нашел эту skip опцию, useQuery которая помогает вам звонить useQuery условно.

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

При любых insuranceId изменениях выполняется обратный вызов, поэтому он выполняется после монтирования один раз, а затем при последующих изменениях.

Метки: ,