Неверный вызов крюка. Хуки могут быть вызваны только внутри тела компонента функции. Любые идеи?

Question

Я честно пролистал существующие вопросы для ответа, но этот вопрос является загадкой.

Firebase. js

import * as firebase from "firebase/app";
import "firebase/auth";
import React, { useContext } from "react";
import { Auth } from "../contexts/AuthContext";

export const FirebaseLogout = async () => {
  const { state: auth, dispatch } = useContext(Auth);
  const logout = await firebase
    .auth()
    .signOut()
    .then(
      dispatch({
        type: "LOGOUT",
      })
    )
    .catch((err) => {
      console.log(err);
      return err;
    });
  return;
};

MyPage. js

import { FirebaseLogout } from "../../../firebase/Firebase";

...Stateless functional component with other non-relevant code between...

<Button onClick={() => FirebaseLogout()} type='primary'>
  {auth.user.uid ? "Logout" : "Sign up"}
</Button>

Answer 1

FirebaseLogout является действием или обработчиком и поэтому не может использовать хук useContext. Решение состоит в том, чтобы либо превратить его в привычный крючок, либо передать значение контекста в качестве аргумента

export const FirebaseLogout = async () => {

  const logout = await firebase
    .auth()
    .signOut()
    .then(
      dispatch({
        type: "LOGOUT",
      })
    )
    .catch((err) => {
      console.log(err);
      return err;
    });
  return;
};

MyPage. js

const contextValue = useContext(Auth);


  <Button onClick={() => FirebaseLogout(contextValue)} type='primary'>
     {auth.user.uid ? "Logout" : "Sign up"}
   </Button>