Показать загрузчик из вспомогательной функции с помощью API контекста реакции - PullRequest
Новая
       66

Показать загрузчик из вспомогательной функции с помощью API контекста реакции

1 голос
/ 25 мая 2020

Я новичок в React Context API. Что я пытаюсь сделать, так это установить загрузчик, когда я выполняю вызов API, и остановить загрузчик после выполнения вызова API. Но если я выполняю эти действия по отправке из вспомогательной функции, я получаю сообщение об ошибке:

Неверный вызов ловушки. Хуки могут быть вызваны только внутри тела функционального компонента. Это могло произойти по одной из следующих причин: 1. Возможно, у вас несовпадающие версии React и средства визуализации (например, React DOM). 2. Возможно, вы нарушаете правила хуков, исправьте эту проблему. 

// ApiCalls.js
export const LoginService = (username, password) => {
  //to show loader when api call starts
    const [dispatch] = useContext(LoaderContext);

    dispatch({
        type: "SHOWLOADER",
        payload: true
    });
}

// Hello.js
export default function Hello(props) {

  useEffect(() => {
    LoginService();
  }, []);

  return(
    <h2>Hello</h2>
  )
}

Воспроизводимый пример .

Ответы [ 2 ]

1 голос
/ 25 мая 2020

У вас две ошибки:

  1. useContext(LoaderContext) возвращает кортеж (с вашей реализацией), поэтому вам нужна функция установки: 
// Not [dispatch]
const [,dispatch] = useContext(LoaderContext);
LoginService - это на самом деле пользовательский хук , и его не следует вызывать внутри другого хука (см. Правила хуков ). 
import { LoaderContext } from './LoaderContext';
import {useContext, useEffect} from 'react';

// Use username,password
export const useLoginService = (username, password) => {
  const [, dispatch] = useContext(LoaderContext);

  useEffect(() => {
    dispatch({
      type: "SHOWLOADER",
      payload: true,
    });
  }, []);
};

// Usage
export default function Hello(props) {

  useLoginService();

  return(
    <h2>Hello</h2>
  )
}

См. фиксированный пример .

0 голосов
/ 25 мая 2020

Вам нужно изменить свой компонент следующим образом: 


export default function Hello(props) {
  const [state, dispatch] = useContext(LoaderContext);

  useEffect(() => {
    dispatch({
        type: "SHOWLOADER",
        payload: true
    });
  }, []);

  return(
    <h2>Hello</h2>
  )
}
...